CSS初级学习（一）：清除浮动的六种方式

CSS中清除浮动的六种方式

在编写HTML网站为部分元素设置浮动（float）时，经常会出现浮动异常的情况
（也称之为样式塌陷），如下图所示：

源码如下：

 <div>
     <p style="float:left;">此句话向左浮动</p>
     <p style="float:right;">此句话向右浮动</p>
  </div>
   <div>
        <span>此句话独立存在</span>
    </div>

方法一：为父级添加样式“overflow:hidden/auto”

    <div style="overflow:auto">
        <p style="float: left;">此句话向左浮动</p>
        <p style="float:right;">此句话向右浮动</p>
    </div>

方法二：为父级设置固定高度

<div style="height: 50px;">
        <p style="float: left;">此句话向左浮动</p>
        <p style="float:right;">此句话向右浮动</p>
    </div>

不推荐这个方法，明显影响到了下面标签的布局

方法三：将标签部分使用“display”属性展现为表格

<div style="width: 100%; display: table;">
        <p style="float: left;">此句话向左浮动</p>
        <p style="float:right;">此句话向右浮动</p>
    </div>

效果同样不错，但需注意表格需要设置宽度

方法四：为父级设置样式“display: inline-block;”

<div style="display: inline-block;">
        <p style="float: left;">此句话向左浮动</p>
        <p style="float:right;">此句话向右浮动</p>
    </div>

影响到了第二个p标签的浮动

方法五：为父级也添加浮动

<div style="float:left">
        <p style="float: left;">此句话向左浮动</p>
        <p style="float:right;">此句话向右浮动</p>
    </div>

存在缺陷的一种方法，另一种样式塌陷
方法六（绝妙）：在父级中追加空子元素级，并设置样式值;clear:both

<div>
   <p style="float: left;">这句话向左浮动</p>
   <p style="float: right;">这句话向右浮动</p>
   <p style="clear: both;"></p>
 </div>

非常好的一种方法，在不影响父级的情况下解决了样式塌陷的错误，推荐使用