浮动
在容器不设置高度且子元素浮动时,容器高度不能被内容撑开,使内容跑到容器外面,影响布局,这种现象就是浮动。
浮动的工作原理
- 浮动元素会脱离文档流,不会占据空间(引起高度塌陷问题)
- 浮动元素碰到包含它的边框或其它浮动元素的边框时停留
浮动元素可以左右移动,直到遇到另一个浮动元素的边框或遇到包含它的边框后才会停留,浮动元素脱离了文档流,当元素浮动后,不会影响块级元素的布局,只会影响内联元素的布局。当包含浮动元素的容器高度小于浮动框时,会引起高度塌陷问题。
浮动元素引起的问题
- 浮动元素的父元素高度无法被撑开,影响父元素的同级元素
- 高度塌陷
- 脱离文档流
清除浮动的方式
- overflow: hidden
- clear:left、clear:right、cleat:both
- 使用BFC
float
浮动元素是脱离文档流的,但不脱离文字流。
浮动元素的特点:
-
对于自身:
- 浮动元素可以形成块;可以让行内元素拥有宽和高
- 浮动元素尽量靠上
- 尽量靠左(float:left)或右(float:right)。如果那一行不能满足浮动元素的宽度要求,则元素会往下掉。
-
对于兄弟元素:
- 不会影响其它块级元素的位置
- 会影响其它块级元素的文本
- 上面紧贴非浮动元素、旁边紧贴浮动元素
-
对父元素影响:
- 从布局上“消失”
- 高度塌陷
BFC
BFC(块级格式化上下文)就是页面上一个隔离的独立容器,里面的子元素不会影响到外面的元素
BFC布局规则
- 内部盒子在垂直方向,一个接一个的放置
- Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠
- 计算BFC的高度时,浮动元素也参与计算
- 每个Box的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化 ,否则相反)。即使存在浮动也是如此
- BFC的区域不会与float box重叠
如何创建BFC
- float的值不为none
- position的值为absolute或者fixed
- overflow的值为hidden、auto、scroll
- display的值为inline-block、table-cell、flex、table-caption、flex
BFC解决的问题
- margin重叠
- 高度塌陷
- 两栏布局
margin重叠
margin重叠就是两个块级元素的上下外边距会合并为一个外边距,这个外边距取值为两个元素上下外边距值较大的那个,重叠只会出现在垂直方向。浮动元素和绝对定位元素这种脱离文档流的元素的外边距不会重叠。