CSS学习摘要-浮动与清除浮动

以下从浮动到BFC的段落 摘自的相关博文，再加以整理和添加自己的一点思路而成。

行内元素和块级元素

级别	元素
行内元素	a,b,strong,span,img,label,button,input,select,textarea
块级元素	header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

• 标签分为行内元素与块级元素
• 两者区别和特点：
  • 行内元素能与其它行内元素并排共处一行，而块级元素独占一行；
  • 行内元素设置width无效，height无效（可以设置line-height)，margin和padding在上下方向的设置无效；
  • 行内元素适合显示具体内容，而块级元素适合做布局；
  • 行内元素一般是内容的容器，而块级元素一般是其他容器的容器；
• 行内元素转化为块级元素，使用display：block
• 块级元素转化为行内元素，使用display：inline

标准文档流和脱离标准流

web网页的制作，就像是一个“流”，从上而下，像“织毛衣”。
标准文档流下的微观现象：

• 空白折叠现象
  • 多个空格会被合并成一个空格显示到浏览器页面中。
• 高矮不齐，底边对齐
  • 文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐。
• 自动换行，一行写不满，换行写
  • 如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

• （1）浮动
• （2）绝对定位
• （3）固定定位

总结

浮动四大特性

• 浮动的元素脱标
  • 脱离标准流，漂浮，遮盖标准流下的元素
• 浮动的元素互相贴靠
  • 没有足够空间互相贴靠时，往边靠
• 浮动的元素有“字围”（文字围绕）效果
  • 所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。
• 浮动元素紧凑效果（收缩）
  • 一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

布局浮动的原则

按布局来说，一般都不会是一个盒子单独浮动起来，往往是横向区域的盒子一起浮动。且为了不影响接下来的文档标准流，往往也要收尾做出清除浮动。

为什么要清除浮动？

在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。（为什么？）

试想想，如果我第一版的页面的写完了，感觉非常爽，突然隔了一个月，产品经理说页面某一块的区域，需要加点内容，或者觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白，肯定是去每个地方加内容，改图片，然后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是肯定的。

所以父盒子我们一般不设置高度，而由子元素的内容去撑起父盒子的高度。那么当这个子元素是浮动的时候，父盒子没有高度，浮动子元素是不会填充父盒子的高度的，这个时候就会有下一栏的盒子跑过来到浮动子元素的下面被覆盖摭挡了，非常影响页面布局。

浮动元素确实能实现我们页面元素并排的效果，这是它的好处，但同时它还带来了页面布局极大的错乱！！！所以我们要在浮动完之后再做一步清除浮动的操作（并不影响浮动子元素之前的布局，只是为了下排的布局不乱。）

清除浮动的方法

• 给父盒子设置高度（不推荐，除非万年不变的导航栏之类）
• clear:both（左右浮动均可清除）
  • 给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both
  • 又被称为内墙法，无缘无故添加了div元素，结构冗余
• 伪元素清除法（常用）

  • 给浮动子元素的父盒子，也就是不浮动的元素，添加一个clearfix的类，然后设置。

    .clearfix:after{
    /*要写这三句话去实现*/ 
    content: '.'; 
    clear: both; 
    display: block;
    }

• overflow：hidden（常用加推荐）
  • overflow：auto也可以清除浮动，但auto会出现滚动条，所以还是使用不影响布局的hidden，推荐使用这种方法，原理大致是借助了BFC（块格式上下文）实现的。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

逐渐演变成overflow：hidden清除法。其实它是一个BFC区域。

BFC常见作用

• 包含浮动元素，解决高度塌陷和清除浮动；
• 不被浮动元素覆盖（比如文字围绕效果）；
• 阻止外边距折叠（margin塌陷）
  • 在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。

end
2018-06-01