浮动
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
选择器{float:属性值}
副属性:
none 元素不浮动(默认值)
left 元素向左浮动
right 元素向右浮动
浮动特点:
1.浮动元素会脱离标准流(脱标)
2.浮动的元素会一行内显示并且元素顶部对齐
3.浮动的元素会具有行内块元素的特性
设置了浮动的元素的特性:
1.脱标2.浮动的盒子不再保留原先的位置,其他元素自动跟前,甚至重叠
清楚浮动:
clear属性,副属性:left左,right右,both左右侧不允许浮动元素,none默认值
父级边框塌陷的方法:
1.浮动元素后面加div或者块级元素属性加一个clear:both
2.设置父元素的高度
3.父级添加voerflow属性,overflow:hidden
overflow属性:
溢出处理,就是对超出的那一部分属性进行处理
visible默认值,不会被修建
hidden,内容会被修建,超出部分不会被看见
scroll,会显示滚动条查看被修剪内容,两边滚动条会一直存在,无论你是否被超出
auto,右超出内容就显示滚动条,如果没有就不显示
4.父级添加伪类after
::after表示在该元素最后去添加内容
.parent::after{
content: '可以为空'; /*在clear类后面添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}
清除浮动,防止父级边框塌陷的四种方法
浮动元素后面加空div
简单,空div会造成HTML代码冗余
设置父元素的高度
简单,元素固定高会降低扩展性
父级添加overflow属性
简单,下拉列表框的场景不能用
父级添加伪类after
写法比上面稍微复杂一点,但是没有副作用,推荐使用