#### clear属性 第一种运用clear的方式在需要清浮动的元素下放一个div，并加上`clear:both` html ~~~ <div class="content" > <div class='float'></div> </div> <div class='clear'></div> <p>some text</p> 复制代码 ~~~ css ~~~ .float{ width:300px;height:300px; float:left; background: green; opacity: .5; } p{ background:red; } .clear{ clear:both; } 复制代码 ~~~ 第二种方式是用伪元素`:before`或`:after` html ~~~ <div class="content" > <div class='float'></div> </div> <p>some text</p> 复制代码 ~~~ css ~~~ .content:after{ content:''; display:block; clear:both; } .float{ width:300px;height:300px; float:left; background: green; opacity: .5; } p{ background:red; } 复制代码 ~~~ ## overflow:hidden 该方法利用了BFC的特性，当元素有以下特性时，触发BFC * `html`根元素 * `float`的值不为`none` * `overflow`的值为hidden、auto或scroll * `position`的值不为`static`或`relative` * `display`的值为`table-cell`、`table-caption`、或`inline-block` html ~~~ <div class="content" > <div class="float"></div> </div> <p>some text</p> 复制代码 ~~~ css ~~~ .content{ overflow: hidden; } .float{ float:left; width:100px;height:100px; background: green; opacity: .5; } p{ background:red; } ~~~