1.标准流
- 概念
- 标准流即浏览器对网页中的元素进行排版的一种默认方式.
- 默认排版方式
- 块元素独占一行自上而下依次排布,行内元素/行内快元素自左而右在一行排布
2.浮动流
-
概念
- 使网页内的元素可以不按标准流的方式进行排布的一种方式
-
排版方式
- 块元素/行内元素/行内块元素均可进行水平布局,设置宽高
-
格式及注意点
- float:left|right 浮动流中没有居中对齐, 也就是没有center这个取值
- 在浮动流中是不可以使用margin: 0 auto;
-
浮动元素的脱标
- 元素浮动之后不占据原来的位置即脱标
-
元素排布规则
- 若浮动元素前没有同级未浮动元素
- 父级宽度可容纳所有所有浮动元素时,left属性时自左向右依次排布,right时自右向左排布
-
父级宽度可不可容纳时自上而下拼贴(修改width=300px)
- 若浮动元素前有同级未浮动元素, 由浮动元素浮动之前在标准流中的位置来确定
- 若浮动元素前没有同级未浮动元素
-
浮动的文字缠绕效果
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
3.清除浮动
- 清除浮动
- 在标准流中父盒子未设置高度,子盒子的高度可以撑起父盒子的高度;但在浮动流中若未设置高度,父盒子的高度便为0,并且后面元素的排布位置将发生错误,所以有时必须清除浮动带来的影响.
- 清除浮动的方法
- 给父盒子添加高度清除浮动.(因为不能根据子盒子的内容变动而改变高度不建议使用)
- clear:left|right|both 清除浮动
- 外墙法清除浮动
- 在最后一个浮动标签后添加一个额外标签
- 弊端:会添加大量无意义的标签
- 添加伪元素清除浮动
Document