CSS基础（float属性与清除浮动）

3.8

这是CSS里比较重要的属性：浮动，这个属性会在以后经常用到，算是一个重点吧

浮动

语法：float：left | right | none

特点：

浮动的元素不占位置，脱离了标准文档流（页面中标签的默认显示方式就是标准流）

浮动的元素可以实现元素的模式互换

同方向浮动的元素会顺次排列

浮动的元素顶端对齐

默认情况下，子元素浮动只会在父元素的区域之内（除非你刻意用margin把子元素弄出去）

父元素浮动会把子元素一起带跑

浮动前面有标准流，会漂浮到标准流的后面

值得注意的是：文字不会受浮动影响

利用浮动可以实现：

制作网页导航（块级元素在一行上显示）

制作网页左右布局（块级元素在一行上显示）

副作用：当所有的子元素都设置了浮动之后，不占据位置，从而导致父元素没有高度，这时候就需要清除浮动。

清除浮动就是消除浮动的影响

方式：

直接给父元素设置高度
给父元素设置overflow：hidden （这里面涉及到BFC）
使用clear：left | right | both

Clear：可以认为设置了clear属性的元素，不能被浮动的元素覆盖

Left：不允许左边有浮动元素

Right：不允许右边有浮动元素

Both：两边都不允许

用clear 属性清除浮动得到的效果不会涉及到别的元素，只对当前设置元素生效

给父元素添加一个子元素 div ，放在最后面，设置clear：both；

使用单伪元素清除浮动（这个方法是必须掌握的）

.clearfix:after{
       Content：””;(这个属性必须有)
       Clear:both;
       Display:block;
       Visibility:hidden;
       Height:0;
       Line-height:0;     }

Overflow的用法：

Overflow：visible 默认值超出部分可见

Overflow：hidden 将超出部分隐藏

Overflow：scroll 添加滚动条

Overflow：auto 自动设置滚动条

先这样吧，大家妇女节快乐

CSS基础（float属性与清除浮动）

浮动

推荐阅读