校园笔记-CSS-浮动

浮动

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

选择器{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

写法比上面稍微复杂一点，但是没有副作用，推荐使用