CSS学习笔记 —— 浮动

最新推荐文章于 2024-07-04 11:19:29 发布

Libra0809

最新推荐文章于 2024-07-04 11:19:29 发布

阅读量572

点赞数

分类专栏：前端学习笔记文章标签： css

本文链接：https://blog.csdn.net/bobbi001/article/details/117812034

版权

前端学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文是作者本人学习过程中的笔记总结，如若文中有不正确，或需要补充的地方，欢迎在评论区中留言。

1. 定义

浮动是一种非常重要的布局属性
作用：让元素脱离标准流，同一级的浮动元素可以并在一排进行显示
书写方式： float : left(or right)
属性值： left 左浮动； right: 右浮动

2. 标准文档流

2.1. 说明

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式；
HTML文件就是一种标准文档流文件
HTML中的标准文档流特点，通过两种方式体现：微观现象和元素等级

2.2. 微观现象

空白折叠现象，这个在之前的笔记中有讲到，即多余的空格和换行都会折叠成一个空格进行展示
文字类的元素如果排在一行，会出现一种高低不齐、底边对齐的对齐效果
自动换行，元素内一行内容写满元素的 width 时，会自动进行换行显示

显示效果：

2.3. 元素等级

在标准流中，大部分元素是区分等级的，一般将元素划分为以下几种常见的加载级别：块级元素、行内元素、行内块元素
块级元素：大部分容器级标签都是块级元素，如 <div>, <p>等
行内元素：大部分的文本标签，如 <span>, <a> 等
行内块元素：如 <img>, <input> 等

2.4. 块级元素

块级元素可以设置宽高，在浏览器中正常加载
块级元素必须独占一行，不能与其他标签并排在一行
块级元素如果不设置宽度，会自动撑满父元素的 width 区域；不设置高度，则会被内部的内容所自动撑开

2.5. 行内元素

行内元素不能正常加载高度和宽度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题
行内元素可以与其他的行内元素，或行内块元素并排在一行显示
行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开

2.6. 行内块元素

行内块元素可以设置宽高
行内块元素可以与其他的行内元素或者行内块元素并在一行显示
行内块元素如果不设置宽高，要么以原始尺寸加载，要么被内容撑开
行内块元素依然具有标准流的微观性质，例如空白折叠现象

3. display属性

标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的
后期可以通过 display 属性，更改一个标签的显示模式
display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上到下加载，存在空白折叠等微观性质
要想实现更多的页面布局效果，需要脱离标准流的限制，方法包括：浮动、绝对定位、固定定位，这些后面会陆续提及到。

属性值：

HTML代码：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    p {
        width: 300px;
        height: 100px;
        background-color: pink;
    }
    .three {
        display: inline-block;
        width: 300px;
        background-color: skyblue;
    }
    .two {
        display: inline-block;
        width: 200px;
        background-color: orange;
    }
</style>
<body>
    <p>这是第一部分内容</p>
    <span class="two">这是第二部分内容</span>
    <span class="three">这是第三部分内容</span>
</body>

显示效果：

左边是给 <p> 标签设置了宽高，剩下的两个 <span> 标签的内容是并排显示的

中间是给第二个 <span> 设置了 display=block 且设置了宽度，结果第三部分内容就独占一行进行显示了，且高度是有文字内容自动撑开

右边的这个，是给两个 <span> 标签都设置了 display=inline-block, 所以既可以给它们设置宽高，同时还并排进行显示

4. 浮动的性质

4.1. 脱离标准流

浮动的元素脱离标准流，具备行块二象性，
浮动的元素可以设置宽高，且可以并排显示，而且不会出现空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开

4.2. 依次贴边

浮动的元素依次贴边：父元素宽度足够时，所有子元素会按照HTML书写顺序，一次向左（或右）进行贴边

显示效果（一）：

父元素如果宽度不够，例如放不下子元素4，那么子元素4在贴边时，会跳过上一个子元素3，想更上一个子元素2进行贴边，如果子元素2后面的宽度也不够用，则继续跳过子元素2，向前面的子元素1进行贴边。

显示效果（二）：

如果子元素4在跳过子元素3向更前面的子元素2进行贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。

显示效果（三）：

如果子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4受前面子元素3的影响，不会出现钻空现象。

显示效果（四）：

如果子元素1后面的距离也放不下子元素4，子元素4最终会贴边到父元素左边；

如果子元素4的宽度超过了父元素，只会出现溢出现象。

贴边性质的应用：

用列表结构模拟平均分布的表格布局结构
实现导航栏效果
实现常见的电商或企业网站布局

HTML代码：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        width: 204px;
        height: 93px;
        margin: 20px auto;
        background-color: grey;
        padding: 1px 0 0 1px;
    }
    li {
        width: 50px;
        height: 30px;
        background-color: skyblue;
        margin-right: 1px;
        margin-bottom: 1px;
        list-style: none;
        float: left;
        line-height: 30px;
        text-align: center;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</body>

显示效果：

4.3. 没有 margin 塌陷

浮动的元素没有 margin 塌陷， margin 塌陷现象只出现在标准流中，浮动元素已经脱离了标准流，不再具有 margi n塌陷现象

显示效果：

4.4. 让出标准流位置

元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素

显示效果：

4.5. 文字环绕效果

浮动元素让出标准流位置后，会产生压盖效果，遮挡住后一个未设置浮动的元素的部分内容
若被遮挡的元素中有一一些文字内容，这些文字内容是不会被遮盖住的，文字会环绕着浮动的元素进行展示（除了文字，也无法遮挡图片）

效果展示：

5. 浮动的问题

（1）问题一

标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高
如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父元素的

显示效果：

（2）问题二

父元素没有高度，会影响后面元素的标准流位置
如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边

显示效果：

6. 清除浮动

6.1. 设置 height

给标准流的父元素强加一个合适的高度
解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边
缺陷：父元素高度不是自适应，一旦子元素高度发生变化，问题可能再次出现

显示效果：

6.2. clear 属性

清除标签元素自身受到的前面的浮动元素的影响
属性值：left -> 清除前面左浮动带来的影响; right -> 清除前面右浮动带来的影响; both -> 清除前面所有浮动带来的影响
给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置
解决：浮动元素影响后面元素的标准流位置和贴边
缺陷：父元素不能自适应高度，两个父元素之间如果有 margin ，效果不正确

6.3. 隔墙法

（1）外墙法

在两个大的父盒子之间，添加一个空的 <div> 标签，标签上带有 clear: both 属性
解决：浮动元素影响后面元素的标准流位置和贴边，模拟父元素间的距离
缺陷：父元素没有高度自适应

HTML代码：

<style>
    .clearfix {
        height: 30px;
        clear: both;
    }
</style>
<body>
    <div class="one">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <!-- 外墙法 -->
    <div class="clearfix"></div>
    <div class="two">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

显示效果：

（2）内墙法

在两个大的父盒子的内部最后面，分别添加一个空的 <div> 标签，标签上带有 clear: both 属性
解决：父元素高度自适应，浮动影响后面的元素位置和贴边
缺点：浮动是CSS样式属性带来的问题，内墙法使用HTML结构去辅助解决问题，如果页面中的浮动元素很多，需要添加多个没有语义的空标签，会造成HTML结构冗余

HTML代码：

<style>
    .clearfix {
        height: 30px;
        clear: both;
    }
</style>
<body>
    <div class="one">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <!-- 内墙法 -->
        <div class="clearfix"></div>
    </div>
    <div class="two">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <!-- 内墙法 -->
        <div class="clearfix"></div>
    </div>
</body>

显示效果：

6.4. 溢出隐藏

给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden 属性，可以解决浮动所有的问题

HTML代码：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 400px;
        border: 2px solid pink;
        margin: 30px auto;
        /* 设置溢出隐藏, 注意div不能设置高度 */
        overflow: hidden;
    }
    p {
        width: 50px;
        height: 70px;
        background-color: skyblue;
        margin: 0 5px;
        float: left;
    }
</style>
<body>
    <div class="one">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="two">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

显示效果：

6.5. 伪类

本质是使用伪类方法利用css代码书写一堵内墙
:after --> 这个伪类表示选中的是某个标签内部的最后的位置
解决方案：将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个 clearfix 的类名

HTML代码：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 400px;
        border: 2px solid pink;
        margin: 30px auto;
    }
    p {
        width: 50px;
        height: 70px;
        background-color: skyblue;
        margin: 0 5px;
        float: left;
    }
    /* 利用伪类清除浮动，类似于内墙法 */
    .clearfix:after {
        /* 注意：一定要添加content字段 */
        content: "1";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
</style>
<body>
    <div class="one clearfix">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="two clearfix">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

显示效果：

附：伪类说明

（1）概念

伪类和类之间有一定的相似之处，也存在明显的区别
普通的类：必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会直接加载到浏览器上
伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他其他选择器使用，伪类选择器后面添加的样式不一定直接加载到浏览器上，只有用户触发了对应的行为，伪类的样式才会加载出来。
伪类选择器的权重与普通的类选择器一样

（2）<a> 标签的伪类