清除浮动

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

.outer{border: 1px solid #ccc;background: #fc9;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

 

效果：子元素浮动，父元素未规定宽高，（1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示

清除浮动：

1. 增加一个块级元素，然后clear:both 设置height，line-height

• html中outer div里添加<div class="clear"></div>

• css添加：.clear{clear:both; height: 0; line-height: 0; font-size: 0}

2. 父元素设置css overflow:auto;zoom:1;

3. 通过before\afer在元素内部插入块元素 content："";diplay:block;height:0;width:0;clear:both;