1.浮动
-
浮动是一种比较传统的布局方式,通过浮动使元素向页面的左侧或右侧移动。
-
使用float属性来设置元素的浮动
-
可选值:
- none 默认值 元素不浮动
- left 元素向左浮动
- right 元素向右浮动
-
浮动的特点:
(1)元素浮动以后会完全脱离文档流,其下的元素会自动上移
(2)设置浮动后元素会向页面的左侧或右侧移动
(3)浮动元素不会盖住没有浮动的兄弟元素,也不会浮出父元素的边框
(4)浮动元素不会超过他上面的没有浮动的兄弟元素,最多一边齐
(5)浮动元素不会覆盖文字 -
脱离文档流:
(1)行内元素变成块元素
(2)块元素宽度和高度都被内容撑开,并且不会独占页面的一行 -
清除浮动clear
- 可选值:
- none 不清除浮动
- left 清除左侧浮动
- right 清除右侧浮动
- both 清除最大那侧的浮动
- 可选值:
-
高度塌陷的问题:
- 父元素的高度默认被子元素撑开,如果子元素浮动将会导致父元素的高度塌陷。
- 解决方式:
- 开启父元素BFC,overflow:hidden
- 使用clearfix
.clearfix::before,
.clearfix::after{
content:’’;
display:table;
clear:bith;
}
-
2.BFC
BFC是元素的一个隐藏属性,开启BFC的元素会具有一个独立的布局区域,这个区域会独立的布局,不会受到外部的元素的影响。
-
元素开启BFC后的特点:
(1)开启BFC的元素,不会被浮动元素所覆盖
(2)开启BFC的元素,子元素的外边距不会传递给父元素
(3)开启BFC的元素,可以包含浮动的子元素 -
开启BFC的方式:
(1)设置浮动
(2)设置display为inline-block
(3)设置overflow为一个非默认值的值