2018-06-10 清除浮动

清除浮动以下几种方式:

1:使用伪类标签

2:添加一个多余的div

3:添加br标签使用其clear="all"属性

4:父元素设置overflow:hidden

5:父元素设置display: table

.clear::after{

display: block;

content: '.';

height: 0px;

visibility: hidden;

clear: both;

   }

第一种: 清除浮动 使用伪类标签

 <div class="clear">

<div style="position: left;width: 50px;height: 60px;background-color: red"></div>

<div style="position: left;width: 50px;height: 60px;background-color: yellow"></div>

</div>

  第二种 添加额外的标签

<div>

<div style="position: left;width: 50px;height: 60px;background-color: red"></div>

<div style="position: left;width: 50px;height: 60px;background-color: yellow"></div>

<div style="clear: both"></div>

</div>

    第三种 父类标签设置overflow 

<div style="overflow: hidden">

<div style="position: left;width: 50px;height: 60px;background-color: red"></div>

<div style="position: left;width: 50px;height: 60px;background-color: yellow"></div>

</div>

      第四种 父类标签设置设置为table

<div style="display: table">

<div style="position: left;width: 50px;height: 60px;background-color: red"></div>

<div style="position: left;width: 50px;height: 60px;background-color: yellow"></div>

</div>

第五种 添加br标签

<div>

<div style="position: left;width: 50px;height: 60px;background-color: red"></div>

<div style="position: left;width: 50px;height: 60px;background-color: yellow"></div>

</br clear="all">

</div>