?????首先我们要理解这个flaot 为什么要清除,作为小白来说直接颠覆了我之前学的内容,因为之前学的东西虽然碰到float后,脱离文档流后给兄弟元素或者父元素造成影响,但是都是通过option来定位 要么绝对 要么相对 ,都是能解决的. ?????这个概念才理解的时候,我都想为什么要清除,我都设置了还要清除干嘛?后来知道 这个清除float 并不是把自身浮动清除,而是相对与前后兄弟标签来说的,也可能相对父级标签;下面来解释一下:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><style> ???.div1{ ???????width: 90px; ???????height: 90px; ???????background-color: steelblue; ???????border: 1px red solid; ???}</style><body> ???<div style="background-color: gold; border: 1px solid red;"> ???????<div class="div1">标签1</div> ???????<div class="div1">标签2</div> ???????<div class="div1">标签3</div> ???????<div class="div1">标签4</div> ???????<!--<div style="clear: both; "></div>--> ???</div></body></html>因为DIV是块级标签很DIAO的,全部自成一行,如果想在标签一后后面直接跟上div1就要加入float:left;
结果出现的情况是因为原来的父级DIV标签没有设置高度导致高度坍塌,全部脱离文档流后没有东西能撑起高度.原来的边框也就是一条线了!
就是在底部加入了行标签 ,关键是里面的CSS,clear:both;他会清除里面所有的兄弟标签的float:left的属性,父级标签也撑起来了,所有的标签1 2 3 4都按左依次排列. 这个方法即让元素按设定浮动,又没有损害父类的高度.可以随着内部标签的增加,父级标签自动的填满背景,不坍塌.结果如下:
还有另外一种方法:
css 清除float的方法
原文地址：http://www.cnblogs.com/laoguiaabb/p/8058844.html