clear

clear:right; 左侧不允许有浮动元素
clear:left; 右侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
clear:none;

解决方案

1.增加父级元素的高度

#father{ border:1px solid #000; height:800px; }

2.增加一个空的div标签，清除浮动

<div class="clear"><div>
.clear{ clear:both; margin:0; padding:0; }

3.overflow

在父级元素中增加一个 overflow：hidden

4.父类中添加一个伪类 :after

#father:after{ content:''; display:block; clear:both; }

小结

1.浮动元素后面增加空div

简单，代码中尽量避免空div

2.设置父元素的高度

简单，元素假设有了固定高度，就会被限制

3.overflow

简单，下拉的一些场景避免使用

4.父类添加一个伪类 :after (推荐)

写法稍微复杂一些，但是没有副作用，推荐使用！

对比

display
方向不可以控制

float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题