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

3.8

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

浮动

语法：float：left  |  right  |  none

特点：

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

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

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

浮动的元素顶端对齐

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

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

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

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

利用浮动可以实现：

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

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

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

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

 

方式：

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

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

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

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

Both：两边都不允许

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

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

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

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

    

 

Overflow的用法：

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

Overflow：hidden  将超出部分隐藏

Overflow：scroll    添加滚动条

Overflow：auto     自动设置滚动条

 

 

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