原创 码农笔记 CSS笔记

CSS 浮动

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

什么是浮动

语法规范：

选择器{float:属性值;}

浮动特性（重难点）

注意：

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

浮动布局需要注意的点：

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

   • 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动

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

清除浮动

综述

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

选择器{clear:属性值;}

清除浮动的方法

额外标签法

也称隔墙法，是 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;
}

本文由 小但 创作
全文共：1229个字
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载，均为作者原创，转载前请务必署名
最后编辑时间为: Jan 23, 2021 at 04:07 pm