一文读懂CSS盒子的浮动与清除浮动

最新推荐文章于 2025-03-24 10:28:16 发布

臣妾做不到啊！！！

最新推荐文章于 2025-03-24 10:28:16 发布

阅读量1.3k

点赞数 26

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_80038066/article/details/143469638

版权

浮动(loat)是使用率较高的一种定位方式。有时希望相邻块级元素的盒子左右排列(所有盒子浮动)，或者希望一个盒子被另一个盒子中的内容所环绕(一个盒子浮动)做出图文混排的效果时,最简单的方法就是运用浮动属性使盒子在浮动方式下定位。

浮动的基本概念

浮动(loat)是使用率较高的一种定位方式。有时希望相邻块级元素的盒子左右排列(所有盒子浮动)，或者希望一个盒子被另一个盒子中的内容所环绕(一个盒子浮动)做出图文混排的效果时,最简单的方法就是运用浮动属性使盒子在浮动方式下定位。

float: left：元素向左浮动。
float: right：元素向右浮动。
float: none：元素不浮动（默认值）。
float: inherit：继承父元素的浮动属性。

演示代码：


    <style>
        article{
            width: 600px;
            height: 600px;
            background-color: gray;
            margin-bottom: 5px;
        }
        div{
            width: 200px;
            height: 100px;
            background-color: pink;
            margin: 5px;
            
        }
        #d2{
            background-color: red;
            float: left;
        }
        #d3{
            background-color: green;
            float: left;
        }
        #d4{
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div id="d2">2(浮动)</div>
        <div id="d3">3(浮动)</div>
        <div id="d4">4(浮动)</div>
        <div>5</div>
    </article>
</body>

演示效果：

将一个元素设置浮动之后，会根据其父元素的宽高出现一个浮层，来放置这个元素与其设置浮动了的兄弟元素，与绝对定位不同的是设置了一个绝对定位就会出现一个浮层，而浮动是共用一个浮层。

图中2，3，4都被设置了左浮动，被设置浮动后，盒子就会相应的浮起来，并且不再保留原来的位置，原来位置后边跟随的盒子5就会替补前边浮动之后空出来的位置，所以是我们看浮动后的页面就是盒子5被浮动的2覆盖。

浮动的影响

文档流：浮动元素会从正常的文档流中移出，但仍然会影响周围的非浮动元素。
块级元素：浮动的块级元素会占据其父元素的宽度，除非设置了具体的宽度。
行内元素：浮动的行内元素会变成块级元素。

浮动的应用

CSS中的浮动属性可以用于将元素从文档的正常流中脱离出来，并使其向左或向右浮动，以便其他元素可以环绕它，常用于以下几个方面：

布局：可以利用盒子的浮动实现多栏布局。通过将多个盒子元素设置为浮动，并设置宽度和间距，可以将页面分为多个列，并在不同列中放置内容。

图片和文字环绕：可以使用浮动将图片或其他块级元素放在文本中，并使文本环绕在其周围。通过将图片设置为浮动，可以使文本流动到图片周围而不是被图片覆盖。

导航栏：可以使用浮动来创建水平导航栏。通过将导航栏菜单项设置为浮动，可以将其水平排列，并使其在一行中显示。

下面我们就用浮动属性设置一个网页的侧边栏跟导航栏

演示效果：

演示代码：

        <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: aliceblue;
            }
            /* 文章块 */
            article{
                width: 70%;
                height: 500px;
                background-color: plum;
                border: 2px black solid;
                float: left;
            }
            /* 侧边栏 */
            aside{
                width: 25%;
                height: 500px;
                background-color: greenyellow;
                border: 2px black solid;
                float: left;
                margin-left: 2%;
            }
            /* 页脚 */
            footer{
                width: 100%;
                height: 10%;
                background-color: pink;
                border: 2px black solid;
            }
        </style>
    </head>  
     
    <body>  
      
        <header>  
            <h1 align="center">xx大学</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="./tu.jpg" alt="文章配图" width="200" height="200">  
                    <p>想了解xx大学：<a href="#/">点击这里</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 xx大学</p>  
        </footer>  
      
    </body>