盒子模型——网页布局、浮动、如何开启BFC

目录

前述：

一、标准流（普通流/文档流）

二、浮动

1.浮动元素会脱离标准流（脱标）

2.浮动的元素会一行内显示并且元素顶部对齐

3.浮动的元素会具有行内块元素的特性

BFC是什么？

开启BFC方式：

BFC解决了哪些问题

三、清除浮动

---

前述：

传统网页布局的三种方式：

网页布局的本质----用css来摆放盒子，把盒子摆到相应位置

css提供了三种传统布局方式（简单易懂就是盒子如何进行排列顺序）：

• 标准流（普通流/文档流）
• 浮动
• 定位

一、标准流（普通流/文档流）

所谓的标准流：就是标签按照规定好默认方式排列

二、浮动

  float :  left    左浮动
  float ：right   右浮动
  float : none  默认 不浮动

1.浮动元素会脱离标准流（脱标）

脱离标准流的控制（浮）移动到指定位置（动），俗称脱标浮动的盒子不再保留原先的位置

2.浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，那么他们会按照属性值一行内显示并且顶端对齐排列

 注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，那么多出的盒子就会另起一行对齐。

3.浮动的元素会具有行内块元素的特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后就会具有行内块元素的特性 

如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定

当父元素没有高度，子元素都浮动，就会引起父元素坍塌：（可以通过开启BFC来解决） 

BFC是什么？

http://t.csdn.cn/NTbO5http://t.csdn.cn/NTbO5

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

开启BFC方式：

• overflow的值不是visible的其他值
• display值是inline-block . table、 table-cell、flex
• float的值不是none的其他值

BFC解决了哪些问题

1. margin重叠问题
2. 浮动带来的父元素高度坍塌的问题
3. BFC还可解决多栏问题

BFC当然还能解决更多问题，等涉及到后将会继续更新。 

三、清除浮动

清除浮动
   1.给父元素加height
   2.给父元素加overflow:hidden
   3.在所有有浮动的元素后加一个空元素div，给此空元素添加样式clear:both
     

clear:left   /* 清除左浮动 */
clear:right  /*    清除右浮动 */
clear:both    /* 清除左、右浮动 */

   4.给父元素添加伪元素,在此伪元素上清除浮动

.clearfix::after{
    display:block;
    content:"";
    clear:both;