清除浮动

1、为什么使用浮动

为了解决几个块级元素并排显示问题，虽然可以使用定义块级元素的display为inline-block（这种方式也不会出现父级元素坍塌问题）但是这种方式不能控制元素的位置而是默认从左到右，所以要实现元素是居左还是居右使用浮动更方便。

2、为什么清除浮动

解决父级高度塌陷问题

3、如何清除浮动

1）父元素添加overflow:hidden

缺点：超出边框的内容会被隐藏。
问题：当组先级元素相对定位，父元素overflow：hidden；时，子元素超出部分不隐藏，如下图：child元素超出部分没有被隐藏

2）父元素添加clear:both;

缺点：margin失效。不推荐

3）父元素添加伪元素::after，设置clear:both，比较推荐

.clearfix::after{
  content:’’;
  clear:both;
  display:block; /*转为块级元素*/
}

优点：父元素被子元素内容撑开（父元素有高度），比较方便也符合语义化

缺点：IE6/IE7不识别:after伪元素，存在兼容性问题

4）在两个父盒子之间“隔墙”(加一个冗余元素div)

上下两个父盒子的margin失效，需要将该"墙"设置高度当缝隙

浮动.jpg

缺点：必要在页面添加很多没有意义的冗余元素，过于麻烦，而且不符合语义化

5）给父级元素单独定义高度

优点：简单、代码少、容易掌握。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。