引言 - float 有哪些特性
破坏性
float 破坏了父标签的原本结构，使父标签出现了塌陷现象。导致这一现象的最根本原因在于：被设置了 float 的元素会脱离文档流（可以清空格）。
包裹性
为 div 设置了 float 之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。
例题
例题：写一个左边固定宽度，右边自适应的两栏布局
<div id="left"></div>
<div id="right"></div>
#left {
float: left;
width: 200px;
}
#right {
width: 100%;
margin-right: -200px;
}
那么上题的基础上如何清除浮动？
什么是清除浮动 - clearfix
在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫清除浮动。
清除浮动的方法
方法一：clear:both
- 在浮动元素后使用一个空元素如
<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。 - 使用邻接元素处理，直接给浮动元素后面的元素添加
clear:both;属性。 - <推荐>使用CSS的
:after伪元素和IEhack（这里的 IEhack 指的是触发 hasLayout）
原理：这种方法清除浮动是相对完美的一种清除浮动，利用
:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而clearfix利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
使用方法：给浮动元素的容器添加一个clearfix 的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的 Block element 清理浮动。
. clearfix {
zoom: 1;
}
/*==for IE6/7 Maxthon2==*/
. clearfix :after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}
/*==for FF/chrome/opera/IE8==*/
-
clear:both;指清除所有浮动； -
content: '.'; display:block;对于FF/chrome/opera/IE8浏览器是不可或缺的，其中content可以取值也可以为空。 -
visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。 - 为了IE6和IE7浏览器，要给
clearfix这个class添加一条zoom:1;触发haslayout。
优点：可以完美兼容当前主流的各大浏览器。
补充学习：
Flex 布局教程 - 阮一峰
经典的“圣杯布局”和“双飞翼布局”
方法二：触发浮动元素父元素的 BFC
如何创建BFC：浅谈CSS盒模型
总结
- 使用:after伪元素方法作为主要清理浮动方式，文档结构更加清晰。
- 在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）
- 如果本身就是浮动元素则可自动清除内部浮动，无需格外处理
- 正文中使用邻接元素清理之前的浮动。
特别提醒：当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。
最后，希望大家阅后掌握清除浮动的方法，根据需要进行灵活选择。
网友评论