CSS 浮动
| 分类在:CSS笔记 | 有 0 条评论

CSS 浮动

| 分类在:CSS笔记 | 有 0 条评论

CSS 浮动

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

什么是浮动

语法规范:

选择器{float:属性值;}
属性值描述
none元素不浮动
left元素向左浮动
right元素向右浮动

浮动特性(重难点)

注意:

  1. 浮动元素会脱离标准流
  2. 浮动的元素会一行内显示并且元素顶部对齐
  3. 浮动的元素会具有行内块元素的特性
  4. 浮动的盒子不再保留原先的位置

浮动布局需要注意的点:

  1. 浮动和标准流的父盒子搭配

    • 先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
  2. 一个元素浮动了,理论上其余的兄弟元素也要浮动

    • 一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其它兄弟也应该浮动,以防止引起问题
    • 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

清除浮动

综述

为什么要清除浮动:由于父盒子在很多情况下不方便设置高度,但是子盒子浮动后不占有空间,导致父盒子高度塌陷,因此需要清除浮动。
语法规范:

选择器{clear:属性值;}
属性值描述
left不允许左侧有浮动元素
right不允许右侧有浮动元素
both不允许左右两侧有浮动元素

清除浮动的方法

额外标签法

也称隔墙法,是 W3C 推荐的做法。
语法规范:

在浮动元素末尾添加一个空的标签。
例如:

(css)
.clear{
    clear:both;
}

(html)
<div class="clsar"></div>

父级添加 overflow 属性

给父盒子添加 overflow 属性(hidden,auto,scroll 都行)即可。

父级添加 after 伪元素

语法规范:

给父盒子添加:
.clearfix:after{
    content:"";
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    *zoom:1;
}

父级添加双伪元素

语法规范:

给父盒子添加:
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}

留言: