CSS学习（11）常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中多个盒子的排列规则

三种方式：

1.常规流

2.浮动

3.定位

常规流布局

常规流   也可以叫做   文档流、普通文档流、常规文档流

所有元素，默认情况下，都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。

绝大情况下，一个盒子的包含块，就是其父元素的内容盒（子元素跟着父元素移动）

块盒

1.每个块盒的总宽度，必须刚好等于包含块的宽度

宽度的默认值是auto，意思是将剩余空间吸收掉（如父元素内容盒宽度100px 子元素border宽度1px padding宽度10px width设为auto，则子元素内容盒宽度为78px）

居中方案：子元素设定宽度，margin设置为auto

2.每个块盒垂直方向上的auto值

height：auto，适应内容的高度

margin：auto，表示0

3.百分比取值

padding、宽、margin可以取值百分比

以上是相对于包含块的宽度。

高度的百分比：

①父元素未设置高度，子元素设置百分比无效

②父元素设置高度，子元素按照父元素高度*百分比计算（如果内容过多，则会溢出）

4.外边距合并（height）

两个块盒相邻，外边距会重叠。（两个外边距取最大值）

父子元素，若父元素没有border和padding，父子元素的margin也会合并（只要是相邻就会合并）

浮动

1.文字环绕

2.横向排列

浮动的基本特点：

修改float属性值为：

left：左浮动，元素靠上靠左

right：右浮动，元素靠上靠右

默认值为none

1.被设置浮动的元素，会变成块盒（display属性变成block）

2.浮动元素的包含块，为父元素的内容块。

3.宽度、高度为auto时，适应内容宽度

4.margin为auto时，为0

5.浮动盒子在排列时会避开常规流块盒，而常规流块盒无视浮动盒子

6.行盒在排列时会避开浮动元素（如果文字没有在行盒中，浏览器会自动生成一个包裹文字的行盒，叫做匿名行盒）

 

高度坍塌

原因：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

解决办法：清除浮动

css属性：clear

默认值：none

left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方

right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方

both：清除所有浮动，该元素必须出现在前面所有浮动盒子的下方

转载于:https://www.cnblogs.com/1016391912pm/p/11570138.html