老生常谈，清除浮动
- 首先介绍一下浮动元素的特点
1.在一行显示；
2.浮动元素会脱离文档流，导致下面没有浮动的元素之别不了它的高度和位置，就会往上跑占领浮动元素的位置；
3.元素都是左浮动float:left 元素从左往右依次排列；如果元素都是右浮动，元素从右往左依次排列；
4.父元素浮动，子元素并不会继承子元素的浮动，如果想要子元素也在一行显示，我们需要给子元素也加浮动的属性；
5.浮动属性不能继承；
6.浮动元素本身具有块的特点，所以用了浮动就不需要再加display:block；
7.所有的元素都可以用浮动属性； - 浮动产生的影响
1.设置背景颜色属性背景没有起作用；
2.给父元素设置边框border属性没有被撑开；
3.给父元素设置内边距padding属性也没有被撑开； - 如何解决浮动产生的影响，清浮动
1.给浮动元素的父元素手动添加一个高度height属性（不推荐）
2.给浮动元素的父元素设置：overflow: hidden/auto
3.在浮动元素的父元素结束变迁之前加一个具有块级元素特点的标签（我们一般用div），
给元素加一个clear:both <div style="clear:both"><div>
4.clearfix伪元素去清除浮动<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .wrap{ background-color: mediumvioletred; border: 10px solid red; padding: 10px; /*height: 200px;*/ /* overflow: hidden;*/ } .left{ float: left; width: 200px; height: 200px; background-color: darkblue; } .right{ float: left; width: 200px; height: 200px; background-color: yellow; } .clearfix:after{ display: block;/*确保元素是一个块级元素*/ clear: both;/*不允许左右两边有浮动对象*/ content: ''; *zoom:1;/*兼容ie7*/ /*写全的样式属性：下面的四个属性不是必备的条件*/ height: 0; font-size: 0; overflow: hidden; visibility: hidden; } </style> </head> <body> <div class="wrap clearfix"> <div class="left"></div> <div class="right"></div> <!--<div style="clear:both"></div>--> </div> </body> </html>