css盒子的浮动以及高度塌陷问题及解决方案

小k鏖

已于 2024-10-30 01:09:50 修改

阅读量581

点赞数 15

文章标签： css 前端

于 2024-10-29 14:53:52 首次发布

本文链接：https://blog.youkuaiyun.com/2301_79765198/article/details/143329482

版权

CSS中的浮动（Float）

在CSS中，浮动属性（float）允许元素脱离常规的文档流，以便可以在其周围的元素周围流动。浮动元素通常用于实现文本环绕效果或创建多列布局。当给一个元素设置了浮动属性（float: left; 或 float: right;）后，它会向指定的方向移动，直到其边缘碰到包含块或另一个浮动元素的边缘。以便其他元素可以围绕它流动。浮动通常用于创建文本环绕图像的效果，或者用于实现多列布局。

浮动元素的特点

脱离文档流：浮动元素不再占据文档流中的空间，不会影响到其后的非浮动元素布局。
行内块元素特性：浮动元素表现得像行内块元素，可以设置宽度和高度，并且可以通过外边距相互隔开。
顶边对齐：浮动元素会与其顶部对齐，并且与其周围的浮动元素紧密排列，没有间隙。
父元素高度塌陷：如果父元素中只有浮动子元素，可能会出现父元素高度为0的情况，这称为高度塌陷。
内容环绕：浮动元素允许文本和内联元素围绕在其周围流动。
不遮盖文字：浮动元素不会遮盖文本，文本会自动调整位置以显示在浮动元素的上方或旁边。

接下来演示浮动

第一个浮动前 第二个浮动后


<head>
    <style>
        article{
            width: 600px;
            height: 600px;
            background-color: gray;
            margin-bottom: 5px;
        }
        div{
            width: 200px;
            height: 100px;
            background-color: red ;
            margin: 5px;
            
        }
        #div2{
            background-color: blue;
            float: left;
        }
        #div3{
            background-color: green;
            float: left;
        }
        #div4{
            background-color: purple;
            float: left;
        }
		
    </style>
</head>
<!-- 盒子浮动后，会生成一个与父盒等宽的浮层 -->
<body>
    <article>
        <div>1</div>
        <div id="div2">2（浮动）</div>
        <div id="div3">3（浮动）</div>
        <div id="div4">4（浮动）</div>
        <div>5</div>
    </article>
</body>

盒子移动分析
一、非浮动盒子（第一个和第五个<div>）
1.第一个<div>
1.它按照常规文档流布局，不涉及浮动相关的移动。它在<article>元素内从左上角开始，依据自身的宽度（200px）、高度（100px）以及外边距（5px）占据一块空间，位置固定不变。
2.第五个<div>
1.初始布局时应在第一个<div>下方按文档流顺序排列。但由于中间有浮动盒子，其布局受到影响。它会在浮动盒子（#div2、#div3、#div4）下方进行布局，垂直方向上向下移动到与浮动盒子层底部边缘对齐（考虑外边距）的位置，水平方向依据自身宽度、外边距布局，自身无浮动相关的水平移动。
二、浮动盒子（#div2、#div3、#div4）
1.#div2
1.一旦设置float: left;，它就脱离文档流并向左移动，直至碰到<article>元素的左边缘停止。这个移动是相对于父元素<article>的，其顶部与第一个<div>的顶部在同一水平线上（默认情况），水平方向占据一定宽度（200px + 5px左右外边距）。
2.#div3
1.同样左浮动，它向左移动并紧挨着#div2的右侧。其移动是相对于#div2的位置，水平方向占据自身宽度（200px）加上外边距（5px左右外边距）的空间。如果父元素宽度不足，可能会换行再向左浮动。
3.#div4
1.左浮动使它向左移动并紧挨着#div3的右侧。移动基于#div3的位置，水平方向按自身宽度（200px）和外边距（5px左右外边距）占据空间，若父元素宽度不允许，也可能换行后再向左浮动。

盒子浮动的规则

1.向上向左或者向上向右排列

2.若空间无法容纳,则先向下移动,直到高度足够后再向左向右移动

3.当前浮动盒的顶边,不能高于上一个浮动盒的顶边

图片演示来讲解浮动的规则：

空间无法容纳盒子3,则先向下移动,直到高度足够后再向左移动；而盒子4不得高于上一个浮动盒（盒子3）的顶边

所有结果

课堂练习

<head>  
    <style>
        /* 导航栏 */
        nav ul{
            /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
            height:30px;  
            background-color: aquamarine;
        }
        nav ul li{
            margin-right: 20px;
            float:left;
        }
        /* 固定定位 */
        #contact{
            width: 220px;
            height: 160px;
            background-color: pink;
            border: 2px black solid;
            position: fixed;
            left:1100px;
            top:500px;
        }
        /* 中间板块 */
        section{
            width: 100%;
            background-color: rgb(236, 214, 218);
        }
        /* 文章块 */
        article{
            width: 70%;
            height: 500px;
            background-color: rgb(136, 160, 255);
            border: 2px black solid;
            float: left;
        }
        /* 侧边栏 */
        aside{
            width: 25%;
            height: 500px;
            background-color: rgb(196, 255, 196);
            border: 2px black solid;
            float: left;
            margin-left: 2%;
        }
        /* 页脚 */
        footer{
            width: 100%;
            height: 10%;
            background-color: yellow;
            border: 2px black solid;
        }
    </style>
</head>  
 
<body>  
  
    <header>  
        <h1 align="center">广东云浮中医药职业学院</h1>  
        <p align="center">欢迎来到: <ins>计算机学院</ins></p>  
        <hr> 
        <nav>  
            <ul type="none">  
                <li><a href="#">首页</a></li>  
                <li><a href="#">关于我们</a></li>  
                <li><a href="#">学生风采</a></li>  
                <li><a href="#">联系方式</a></li>  
            </ul>  
        </nav>  
    </header>  
    <hr>  
    <main>  
        <section>  
            <article>  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <br><br><br>
                <img src="./img_src/云中医校徽.jpg" alt="文章配图" width="200" height="200">  
                <p>想了解广东云浮中医药职业学院：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  
            </article>  
 
            <aside>  
                <h3>侧边栏</h3>  
                <p>侧边栏内容，如快速链接、广告等。</p>  
                <table border="1">  
                    <tr>  
                        <th>专业</th>  
                        <th>链接</th>  
                    </tr>  
                    <tr>  
                        <td>计算机应用技术</td>  
                        <td><a href="专业A详情页.html">专业A详情</a></td>  
                    </tr>  
                    <tr>  
                        <td>数字媒体技术</td>  
                        <td><a href="专业B详情页.html">专业B详情</a></td>  
                    </tr>  
                </table>  
            </aside>  
            <!-- 清除浮动 -->
            <div style="clear: both;"></div>
        </section>  
    
        <section id="contact">  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section>  
    </main>  
    <hr>  
    <footer>  
        <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  
    </footer>  
  
</body>

浮动设置图片文字混排

<head>
    <style>
    #img1{
        float: left;
        height: 400px;
        width: 400px;
    }
    #img2{
        float: right;
        height: 400px;
        width: 400px;
    }
 
    </style>
</head>
<body>
   <img src="D:\图片\夏日饮品.jpg" id="img1">
   <img src="D:\图片\夏日饮品.jpg" id="img2">
<p style="font-size: 90px;">用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例用浮动设置图片文字混排示例</p>
</body>

清除浮动概念

一、什么是清除浮动

定义

清除浮动是一种用于解决由于元素浮动而带来的布局问题的技术。当一个元素设置为浮动时，它会脱离文档流，这可能导致父元素的高度塌陷（即父元素不能正确包含浮动子元素的高度）以及后续非浮动元素布局混乱等问题。清除浮动就是要恢复文档流的正常布局，使父元素能够正确包含浮动元素，并且让后续元素的布局符合预期。

二、产生问题示例

父元素高度塌陷

在前面提到的代码示例中，<article>元素包含了三个浮动的<div>（#div2、#div3、#div4）。由于这三个<div>浮动，<article>元素可能不会按照预期扩展到包含这三个浮动元素的高度，而只根据非浮动元素（如第一个和第五个<div>）来计算高度，这就导致了父元素高度塌陷。

后续元素布局混乱

第五个<div>元素（内容为“5”）的布局会受到浮动元素的影响。如果没有正确处理浮动，它可能会出现在不符合预期的位置，比如它可能会与浮动元素重叠或者在布局上与预期的文档流顺序不符。

三、常见的清除浮动方法

1.额外标签法

原理

在所有浮动元素之后添加一个空的<div>标签，并为这个<div>标签设置clear: both;属性。clear属性指定了元素的哪一侧不允许有浮动元素。both表示左右两侧都不允许有浮动元素。当浏览器渲染到这个空<div>时，它会根据clear属性调整自身位置，从而撑开父元素的高度，并且使得后续非浮动元素按照预期布局。

示例代码

在之前的代码中，在<article>内的<div>元素#div4之后添加如下代码：

<div style="clear: both;"></div>

2.伪元素清除法（推荐）

原理

利用CSS的伪元素:after来在父元素内部的最后添加一个虚拟的元素，这个虚拟元素的作用类似于额外标签法中的空<div>。通过设置这个伪元素的display、content和clear等属性来实现清除浮动的效果。这种方法不需要在HTML中添加额外的标签，更符合语义化的要求。

示例代码

在CSS中为<article>元素添加如下样式：

article::after { content: ""; display: block; clear: both; }

3.设置父元素的overflow属性

原理

给包含浮动元素的父元素（如<article>）设置overflow属性为hidden或者auto等非visible的值。当设置overflow属性时，会触发父元素的块格式化上下文（BFC）。在BFC中，父元素会包含其内部的浮动元素，从而解决高度塌陷问题并且让布局恢复正常。

示例代码

在CSS中修改<article>元素的样式：

article { overflow: hidden; }

清除浮动可以解决高度塌陷和文字环绕

高度塌陷（Height Collapse）问题

当一个元素的子元素被设置为浮动时，如果父元素没有正确设置，它可能无法包围浮动的子元素，导致父元素的高度塌陷，即父元素的高度缩小到0。这会影响页面的整体布局，尤其是在浮动元素之后还有其他内容需要正确显示时。
解决方案
为了解决高度塌陷问题，可以采用以下几种方法：
1.使用清除浮动（Clearfix）技术：
通过在浮动元素的父容器上使用伪元素和clear属性，可以清除浮动，确保父容器能够包含浮动的子元素。这是一种常见的、推荐的解决方案，因为它不需要修改HTML结构，只需添加额外的CSS规则。
2.设置父元素的overflow属性：
给父元素设置overflow属性为hidden或auto可以触发块格式化上下文（BFC），这会使得父元素包裹内部的浮动元素，从而解决高度塌陷问题。
3.使用clear属性：
在浮动元素之后添加一个具有clear属性的元素，可以阻止后续元素上浮动，但这种方法会在HTML中增加额外的元素。
4.使用Flexbox或Grid布局：
现代的CSS布局技术，如Flexbox和Grid，提供了更灵活和强大的布局选项，可以自然地解决浮动引起的问题，并且不需要担心高度塌陷。
时效性信息
解决浮动引起的高度塌陷问题的方法仍然是使用清除浮动技术、设置overflow属性或使用Flexbox和Grid布局。这些方法在当前的Web开发实践中仍然是有效和推荐的解决方案。在设计和构建网页时，应当优先考虑使用这些现代的CSS布局技术，以提高布局的灵活性和维护性。

例子

浮动前

浮动后

此时，box1、box2和box3脱离了文档流并向左浮动。它们会根据浮动规则排列在父容器的左侧。而box4由于前面的盒子浮动，它会向上移动到父容器的左上角，就好像前面浮动的盒子不存在一样（在垂直方向上），因为它仍然遵循文档流。同时，父容器的高度发生了塌陷。父容器的高度不再由浮动的子盒子决定，而是只由未浮动的box4以及它的外边距决定，父容器看起来就像没有包含box1、box2和box3一样，这就是高度塌陷现象。