浮动

---

语法：

float：left|right|none

一句话理解：

浮动可以理解为，让某个元素脱离标准流（从左到右，自上而下排列），漂浮在标准流之上；

1. 当一个元素浮动后，他会脱离正常的文档流，然后向左或向右水平移动，一直平移到所处容器的包含框（边框），或者碰到另一个浮动元素的边框。

（呈现为：紧贴着上一个元素的边，如果一行塞不下的话，那么B元素会被挤到下一行）；

2. 如果浮动元素的上一个元素是标准文档流中的元素（即没有浮动），那么浮动元素相对于上一个文档流中的元素的相对垂直位置就不会变

（显示效果：浮动元素总会保证自己的top与上一个普通元素的bottom对齐，也就是，浮动在包围元素的边上）

3. 浮动的元素顺序是根据HTML中的元素顺序决定的，也就是按照浏览器渲染顺序决定排序；

清除浮动

---

一句话理解：

清除浮动可以理解为打破元素之间的横向排列

clear元素：

1. clear:left（不允许元素左边有浮动元素）/right; 应当应用在要去除浮动的元素本身；也就是，你要影响哪个元素，就把样式调用在哪个元素里面；

清楚浮动

---

方法1：添加额外空标签

在浮动元素末尾添加一个额外的空标签，来撑开盒子如下：

CSS:
.clear{clear:both;}
HTML:
<div class="clear"></div>
<br class="clear">
<!-- 利用br标签自带的属性 -->
<br clear="all">
<hr class="clear">
<!-- 同上，利用<hr>标签 -->

优点：简单易懂，并且代码量小；
缺点：额外添加了大量的无语义的标签，HTML代码不够优雅；
总结：知晓就好，不建议使用；

方法2：使用父元素overflow:hidden

CSS:
overflow:hidden;
*zoom:1;

给浮动元素的父容器添加overflow:hidden;，还要注意，在 IE6 中还需要触发 hasLayout，方法：为父元素设置容器宽高或设置zoom:1;
理解：在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。此外还可以让父元素使用overflow:auto;

优点：代码简单，方便理解；

缺点：

1. 多个嵌套后，firefox某些情况会造成内容全选；IE中mouseover造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等；
2. 因为应用了overflow，内容增多时容易造成多余内容被截去，造成下拉菜单会被遮挡，扩展性，兼容性不足；

总结：为了不出奇奇怪怪的问题，不建议使用；

方法3：让浮动元素的容器（父元素）也浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动；

缺点：拆了东墙补西墙，这样会使父元素浮动，影响布局；

总结：不推荐使用。

方法4：display: table;

给父元素设置display：table

优点：代码量小；

缺点：改变了盒模型本身，变为表格模型，由此会造成一系列更多问题；

方法5：使用邻接元素处理

直接在浮动元素后面加上一个带clear属性的元素

.news {
  background-color: gray;
  border: solid1pxblack;
}
.news img {
  float: left;
}
.news p {
  float: right;
}
.content {
  clear: both;
}

<div class="news">
<img src="news-pic.jpg"/>
<p>sometext</p>
<div class="content"></div>
</div>

HTML代码不够简洁，增加了无意义的标签。

方法6：使用CSS3的::after伪元素

:after是CSS新增的伪元素，代表一个元素之后最为邻近的元素

具体做法：

1. 给浮动元素的父容器添加class="clearfix"的类；

2. 然后在样式表中声明clearfix::after的css规则，实现父容器中浮动元素末尾添加了一个看不见的块元素来清理浮动（注意：这个新增的元素在文档流中）；

3. 为了兼容IE6,7，别忘了加上zoom：1；来触发IE的haslayout；

代码如下：

.news{
  background-color: gray;
  border: solid 1px black;
}
.news img{
  float: left;
}
.news p{
  float: right;
}
.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
/*触发hasLayout*/
  zoom: 1;
}

<div class="news clearfix">
  <img src="news-pic.jpg"/>
  <p>sometext</p>
</div>

效果图（清除浮动前）

[图片上传失败...(image-4502f-1518933762350)]

目前clearfix的标准写法：

<!--作者标准写法-->
.clearfix:after {
    content:" ";
    display:table;
    clear:both;
}
.clearfix {
/*触发hasLayout*/
  zoom: 1;
<!--老IE需要配合给父级元素加上zoom:1来解决IE6,7适配问题-->

Question

Q1：为什么叫clearfix？字面上就是修复（fix）清除浮动（clear），方便理解和随时调用；

Q2：为什么在父容器上添加clearfix类名？因为我们要在样失表中添加clearfix::after；

Q3：zoom：1是什么？这是IE的专属属性，为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;以此触发haslayout，和触发BFC一个道理；

Q4：content里面为什么加上一个点？必须要有内容，而句点是最小的内容；

Q5：height和visibility是干嘛的？确保这个伪元素在页面上没有高度，并且不可见，如果没有这两个元素，你就可以看到这个点了；

优点：代码量正常，可复用性强

总结：建议使用伪元素方法

总结

为了清除浮动，上面列了五种方法，大致分为以下两类

1. 利用clear属性，包括在浮动元素最末尾添加一个d爱clear：both的闭合标签，及利用::after伪元素在元素末尾添加内容为一点句点，且aiy偶clear:both属性的元素；

2. 利用BFC，通过各种手段，包括浮动父容器，添加overflow，父容器设为inline-block等使得父容器生成BFC，与外界隔离开；

这里提到了BFC，那么BFC是什么呢？

CSS2.1中引入了Block Fomatting Contexts，即块级元素格式化上下文的概念，简单说就是块级元素的排列规则；

那么如何触发BFC，如何通过BFC来完成各种布局目的呢？且看下一篇文章。