Web前端开发（HTML5+CSS3+JavaScript） 课件 第6章 6.2-浮动.pptx

Web前端基础技术CSSJSHTML第6章浮动

Contents目录浮动

一、浮动浮动是指元素脱离原来的位置，在原来位置上“浮动”出来，不再占据父元素的空间，并具有行内块特征（不换行、可改变大小）。类似绝对定位元素，区别在仅浮动的元素不能直接改变其位置。目的：使多个浮动元素水平排列。应用：水平导航菜单；浮动列布局用法：float:left左浮动，多个浮动元素逐个从左到右紧密排列。float:right右浮动，多个浮动元素逐个从右到左紧密排列取值为none取消浮动。特性：1.浮动元素不再占据父元素空间，父元素高度为0；具有行内块特征（不换行，超过容器宽度才折行；大小默认由内容决定，可以改变宽度、高度）。2.有副作用：后续非浮动元素将占用浮动元素原有空间，且其后所有元素的文本将环绕浮动元素。链接1链接2链接3链接412

例1认识float特性，以及如何消除浮动带来的影响。divclass=containerdivclass=fldiv1/divdivclass=fldiv2/div/divdivclass=no-fl正常元素/divstyle*{box-sizing:border-box;}.container{width:400px;border:10pxsolidred;}.container*{height:40px;background-color:yellow;border:2pxsolidblack;}.no-fl{background-color:green;height:40px;width:400px;}/style1.正常布局

2.div1、div2浮动在原来位置/*1.使1,2浮动*//**/.container.fl{float:left;}1.浮动元素不再占据父元素空间，具有行内块特征（大小默认由内容决定，可以改变宽度、高度）---父元素的高度为0.2.后续非浮动元素将占用浮动元素原有空间，但后续所有元素的文本将环绕浮动元素。---副作用3.期待如下正常效果1.浮动元素在父元素水平排列，父元素大小由浮动元素决定2.不影响后续元素布局

1.父元素使用：overflow：hidden样式。---如果浮动元素的父元素不存在超出其区域的子元素。2.父元素设置高度。---如果浮动元素的父元素存在超出其区域的子元素。3.在最后一个浮动元素之后使用具有clear:both的样式div来清除浮动。.container{/*...*//*height:60px;*/overflow:hidden;}divclass=containerdivclass=fldiv1/divdivclass=fldiv2/divdivstyle=height:0;border:none;clear:both;/div/divdivclass=no-fl正常元素/div123用于包含浮动子元素的父元素时：使一个块元素成为一个独立的元素---重点在于“独立”的理解：1.不影响父元素外部元素：文字不会因为存在浮动元素而产生环绕;2.父元素的高度由子元素的内容决定认识样式属性overflow特性：本意是溢出块尺寸的的内容如何处理消除浮动的影响措施，使用以下方法之一：

例2float样式属性的典型应用1：水平导航栏ulliahref=#首页/a/liliahref=#博客/a/liliahref=#程序员学院/a/liliahref=#下载/a/liliahref=#论坛/a/liliahref=#问答/a/liliahref=#代码/a/liliahref=#直播/a/liliahref=#能力认证/a/liliahref=#高校/a/li/ul测试容器ul后的元素：这是后面的的文字,是否受到浮动的影