黑马程序员技术交流社区
标题: 关于浮动三、两事 [打印本页]
作者: 圆满 时间: 2018-9-14 19:47
标题: 关于浮动三、两事
一、为什么需要浮动 因为行内块有自己的缺陷：1.它可以实现多个元素一行显示，但是中间会有空白缝隙。2.它不能实现盒子左右对齐。
二、什么是浮动 概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到指定位置。
作用：让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。可以实现盒子的左右对齐等等。浮动最早是用来控制图片，实现文字环绕图片的效果。三、浮动的特点 1、浮：加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
2、漏：加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
3、特：特别注意：浮动元素会改变display属性，类似转换为了行内块但是元素之间没有空白缝隙。
四、浮动的扩展1、浮动元素与父盒子的关系子盒子的浮动参照父盒子对齐，不会与父盒子的边框重叠，也不会超过父盒子的内边距。2、浮动元素与兄弟盒子的关系在一个父级盒子中，如果前一个兄弟盒子是：
浮动的，那么当前盒子会与前一个盒子的顶部对齐；普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
（注意：浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
建议：如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题）
五、清除浮动（一）为什么需要清除浮动 因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子（准确地说，并不是清除浮动，而是清除浮动后造成的影响）。
（二）清除浮动本质 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
（四）清除浮动的方法1、额外标签法(隔墙法)这个是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差。
2、父级添加overflow属性方法 可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3、使用after伪元素清除浮动（:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了。现在一般都用双冒号“：：”用于区别伪类标签。）
其使用方法：.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
优点：符合闭合浮动思想 结构语义化正确。
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 百度、淘宝网、网易等
4、使用双伪元素清除浮动使用方法：.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点：代码更简洁。
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：小米、腾讯等。
六、什么时候用清除浮动1、父级没高度。
2、子盒子浮动了。
3、影响下面布局了，我们就应该清除浮动了。
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |