清除浮动和解决底层元素上浮的几种方法

HTML:

<div class="outer">
  123
    <div class="inner">
    456
    </div>
</div>
<div class="next">
789
</div>

 

CSS:

.outer{
background:red;
}
.inner{
    float:left;
    background:blue;
    height:100px;
    width:100px;
}

 

.next{
    height:100px;
    width:200px;
    background:green;
}

存在问题：outer高度坍塌，next上浮

 

首先你要理解文档流和浮动：

文档流：自上而下，从左到右。

浮动（两张纸叠放，最下面的是文档流，上面的是浮动元素的位面）：脱离文档流。

然后分析问题：

outer，高度自适应，存在于文档流中

inner，高100px, 浮动，脱离文档流

next， 高度100px，存在于文档流中。

文档流（底层）next紧跟outer，并不受浮动元素影响，因为不在同一个位面。

方法1： next的CSS中添加clear:both ;//解决了next上浮,但是未解决outer高度坍塌

 

方法2：在outer与next元素之间添加<div class="clear"> </div>, 并设CSS，解决了next上浮，但是outer高度坍塌未解决。

html:

<div class="outer">
   123
   <div class="inner">
      456
   </div>
</div>
<div class="clear"></div>
<div class="next">
   789
</div>

并添加：

.clear:after{
   content:'.'; //在.clear元素的内容的后 面添加上“.”
   background:red;
   display:block;
   clear:both;
   visibility:hidden; 
   height:0;
}

 

方法3：在inner后面同级添加div, 并设clear的CSS同方法2

html:

<div class="outer">
    123
    <div class="inner">
        456
    </div>
    <div class="clear"> </div>
</div>
<div class="next">
    789
</div>

方法4.给outer设定高度100px，这样在文档流层，底部的next会被挤下去，看起来也能排版正常,两者都解决,但是这样outer就不能高度自适应。

 

方法5. 如果inner用了float而outer没有用时，因为innter脱离外层outer，所以outer会出现高度坍塌问题，可以outer也使用float。但是这种方法将outer也脱离文档流，使outer宽高与其内部内容的宽高一致，但是next仍在文档流，会上浮。

方法6：对浮动元素的父元素用:after方法

outer:after{
    content:'.'; //在.clear元素的内容的后面添加上“.”
    background:red;
    display:block;
    clear:both;
    visibility:hidden; 
    height:0;
}

总的来说方法3和方法6较好解决问题，当然方法3中也可以直接 .clear{clear:both};不用设置.clear:after{xx}也能达到一样的效果