CSS浮动:
1.了解CSS浮动的概念:
- 使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动, 直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动属性:用float属性, 它的属性值有两个,为right和left两个属性值。
2.浮动的实例:
3.使用浮动常出现的问题:
- 对附近的元素布局造成改变,使得布局混乱(覆盖)
- 因为元素脱离了文档流,会造成一种坍塌的现象。简单的说就是原来的父元容器是被元素撑开的,当浮动之后,父容器的高度就会坍塌。
4.清除浮动:
- 方式一:给前面一个父元素设置高度
缺点:元素容器不可以自适应高度 - 方式二:在浮动的元素后面加一个空元素,设置属性为clear:both。 在浮动元素后面的元素设置clear:both。
缺点:成本太高,添加了一个元素,难维护
clear属性取值:
none:默认取值,按照浮动元素的排序规则(左浮动找左浮动,右浮动找右浮动)
left:不要找前面的左浮动元素
right:不要找前面的右浮动元素
both:清除所有浮动元素 - 方式三:通过设置父容器css的样式: “overflow:hidden”
通过overflow:hidden;来清除浮动,其实overflow无形中对父容器高度进行了测量, 是设置父容器高度的另一种方法。 - 方式四:after伪类:对父元素的after伪类进行设置。
用伪元素选择器和内墙法结合使用来给元素清除浮动