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:;
    Line-height:; }

Overflow的用法:

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

Overflow:hidden  将超出部分隐藏

Overflow:scroll    添加滚动条

Overflow:auto     自动设置滚动条

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

上一篇:CSS基础 盒子相关属性总结 padding+border


下一篇:CSS基础-边框