CSS浮动布局与清除技巧-优快云博客

本文介绍了CSS中浮动布局的基本原理及其对页面布局的影响，并详细探讨了五种清除浮动的方法，包括使用伪类、空标签、固定高度、父级元素浮动及overflow属性。

在页面布局中我们经常会用到浮动的布局，浮动元素会影响到后面页面的布局效果。例如下面：


    .box{
      background: yellow;
      float: left;
    }
    .box2{
      width: 200px;
      height: 50px;
      background-color: red;
    }

    <p>这里是一段文字是一个p标签</p>
    <div class="box">
      这是一个div元素
    </div>
    <div class="box2">
      这是浮动元素后面的盒子
    </div>

黄色的浮动元素会脱离文档流飘到红色部分上面，但是红色部分的文字却能识别浮动元素而环绕在旁边。也就是其他盒子不能识别被浮动元素，而盒子的内容却能识别（文字不受浮动影响）。

因此浮动之后一般要进行清浮动，才能保证我们的布局合理。

下面是清浮动的方法：

1、:after伪类清除浮动

这是最受欢迎的一种方式。

    .clear::after{
      content: "";
      clear: both;
      display: block;
      height: 0;
    }
    .clear{
      zoom: 1;
    }

上面两条语句配合使用，给clear加在浮动元素的父级。

自己尝试的过程中 after伪类的前三条必须，后面几条去掉也不影响（或者是有我没看出来的影响，有时间在深究）。

2、浮动元素后面加一个空标签

设置为 clear：both; 即可。这样做给页面增加了无意义的标签。如果页面浮动布局多，就要增加很多空div，让人感觉很不好，而且代码整洁性不好。

3、给父级元素定义height

只适合高度确定的布局，需要精确的高度。

4、父级div也一起浮动

不推荐，因为会产生新的浮动问题。

5、父级给一个overflow：hidden

此时必须设置一个width值

转载于:https://www.cnblogs.com/xguoz/p/8954371.html