浮动溢出
在非IE浏览器（如Firefox）下，当容器的高度（height）为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
解决方法
html:
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
css:
.parent{
margin: 0 auto;
width: 500px;
border: 2px solid red;
padding: 10px;
}
.parent:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.child1{
float: left;
height: 300px;
width: 200px;
background: #666666;
border: 1px solid blue;
}
.child2{
height: 100px;
margin-left: 210px;
background: pink;
border: 1px solid yellow;
}
- 方法一：
在html的child2后添加<div class="clear"></div>，css为.clear{clear:both;}
优点：简单，代码少，浏览器支持好
缺点：如果页面浮动布局多，则需要很多空标签 - 方法二：
在parent中添加overflow:auto;
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等 - 方法三:
在parent容器添加一个：after伪元素，并使用content："." 或者为" "在元素的后面生成了内容为一个点的块级元素，并使用一切方法使这个块级元素隐藏并清除浮动clear:both.
.parent:after{
content: ".";/生成一个元素内容为"."，为" "时也好用/
display: block;/让元素为块级元素/
height: 0;/用以下两种方式让元素不渲染/
visibility: hidden;
clear: both;/清除浮动/
}
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） - 方法四:
让parent容器也浮动，只需给parent容器添加 float：left，也可闭合浮动。
优点：代码少
缺点：会导致整个页面大部分都处于浮动状态，容易出现问题
网友评论