CSS布局基础

块级元素：

div, form, table, p, h1~h6, ol, ul, li

行内元素：

a, button, select, textarea, span, input, img, label

CSS三种基本布局：

• Flow
• Layer
• Float

清除浮动的概念：

浮动是指脱离文档流后的浮动元素会覆盖后面的文档流元素。清除浮动是清除自身，不允许当前元素与浮动元素并列显示。如果左右两侧存在浮动元素，则当前元素把自己清除到下一行显示。

清除浮动的方法（针对父元素未设置高，子元素设置浮动）

• 父元素设置高度或

.father{
   overflow: hidden/auto;
}

• 子元素后增加一个空标签

.last{
   clear: both;
}

• 父元素设置一个clearfix类

.claerfix: after{
   content: '';
   height: 0;
   display: block;
   clear: both;
   overflow: hidden;
   visibility: hidden;
},

 
.clearfix{  //兼容IE6/7
   *zoom: 1;
}

清除浮动的常用方法
https://blog.csdn.net/promiseCao/article/details/52771856

BFC

块级格式上下文，是一个独立的布局环境，其中的元素布局不受外界影响，在一个BFC中，块盒与行盒都会垂直地沿着其父元素的边框排列。

• BFC中，内部的box会在垂直方向上，一个接一个放置
• 不同BFC中的box，不会产生margin重叠
• 计算BFC高度时，浮动元素也参与计算

哪些元素会生成BFC？

• 根元素
• 浮动 （float属性不为none)
• 绝对定位 (position属性为absolute/fixed)
• overflow不为visible
• dispaly为inline-block，table-cell，flex，table-flex