当前位置：首页 > article >正文

CSS浮动详解

article 2025/3/10 4:36:40

1. 浮动的简介

浮动是用来实现文字环绕图片效果的

2.元素浮动后会有哪些影响

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。

对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动产生的影响</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid black;
            margin: 5px;
        }

        /* 对父元素的影响： 不能撑起父元素的高度，
        导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元
        素。 */
        .box1,.box2,.box3{
            float: left;
        }

    </style>
</head>
<body>
    <div class="outer">
            <!-- 对前面的兄弟无影响 -->
        <!-- <div class="box box0">0</div> -->
        <div class="box box1">1</div>
        <div class="box box1">2</div>
        <div class="box box1">3</div>
        <!-- 对后面的有影响 -->
         <!-- 123都浮动了，4在1后面，但是文字随图片浮动在下面 -->
        <!-- <div class="box box4">4</div> -->
    </div>
    
</body>
</html>

对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。

对后面的兄弟也影响

对前面的兄弟无影响

3.解决浮动产生的影响（清除浮动）

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动产生的影响</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
            /* 1. 方案一： 给父元素指定高度 */
            height: 112px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid black;
            margin: 5px;
        }

 
        .box1,.box2,.box3{
            float: left;
        }

    </style>
</head>
<body>
    <div class="outer">
    
        <div class="box box1">1</div>
        <div class="box box1">2</div>
        <div class="box box1">3</div>

    </div>
    
</body>
</html>

1. 方案一：给父元素指定高度

但是子元素后面元素还是在浮动元素的后面

2. 方案二：给父元素也设置浮动，带来其他影响。

效果跟方案1一样

3. 方案三：给父元素设置 overflow:hidden 。

子元素后面的元素消失了更严重

但是父元素的兄弟元素没有影响

4. 方案四：在所有浮动元素的最后面， 添加一个块级元素 ，并给该块级元素设置 clear:both 。

解决了 父元素的兄弟元素没有影响；子元素后面的元素没有在浮动的元素后面

但是父元素的高度塌陷了

    .box4{
            /* 清除box4之前所有产生浮动元素的影响 */
            clear:both;
        }

添加的只能是块级元素

总结：

在浮动元素后面添加一个没有高度文字块级标签，然后消除这个标签前面的所有浮动元素

 .mafa{
            /* 清除mafa之前所有产生浮动元素的影响 */
            clear:both;
        }

5. 方案五 ：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。 ===> 推荐使用

 /* ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。
        在父元素最后的位置创建一个子元素
         */
        .outer::after{
            content: '';
            display:block;
            clear:both;
        }

完整代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动产生的影响</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
            /* 1. 方案一： 给父元素指定高度 但是子元素后面还是在浮动元素的后面*/
            /* height: 112px; */
            /* 2. 方案二： 给父元素也设置浮动，
            带来其他影响。但是子元素后面还是在浮动元素的后面 */
            /* float: left; */

            /* 3. 方案三： 给父元素设置 overflow:hidden 。 */
            /* overflow:hidden; */

            /* 4. 方案四： 
            在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。 */

            /* 5. 方案五： 给浮动元素的父元素，设置伪元素，
            通过伪元素清除浮动，原理与方案四相同。===> 推荐使用 */


        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid black;
            margin: 5px;
        }

     
        .box1,.box2,.box3,.box4{
            float: left;
        }
       
        .mafa{
            /* 清除mafa之前所有产生浮动元素的影响 */
            clear:both;
        }
        /* ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。
        在父元素最后的位置创建一个子元素
         */
        .outer::after{
            content: '';
            display:block;
            clear:both;
        }


    </style>
</head>
<body>
    <div class="outer">
        
        <div class="box box1">1</div>
        <div class="box box1">2</div>
        <div class="box box1">3</div>
        <!-- 对后面的有影响 -->
        <div class="box box4">4</div>   
         <!-- <div class="mafa"></div>   -->
    </div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi adipisci accusantium veniam quos sint repellat porro neque, ex nesciunt dignissimos praesentium magni maxime saepe veritatis atque cumque illo aut facere.</div> 
    
</body>
</html>

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

4.浮动练习

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 清除默认样式 */
        * {
            padding: 0;
            margin: 0;
        }

        /* 左浮动 */
        .leftFD {
            float: left;
        }

        /* 左浮动 */
        .rightFD {
            float: right;
        }

        /* 清除浮动 */
        .clearFD::after {
            content: '';
            display: block;
            clear: both;
        }

        /* 设置盒子块水平居中 */
        .container {
            width: 960px;
            text-align: center;
            margin: 0 auto;
        }

        .logo,
        .banner1,
        .banner2 {
            height: 80px;
            background-color: aqua;
            line-height: 80px;
        }

        .logo {
            width: 200px;
        }

        .banner1 {
            width: 540px;
            margin: 0 10px;
        }

        .banner2 {
            width: 200px;
        }

        .menu {
            height: 30px;
            background-color: blueviolet;
            margin-top: 10px;
        }

        .content {
            margin-top: 10px;
        }

        .itme1,
        .itme2 {
            height: 198px;
            width: 368px;
            border: 1px solid black;
            margin-right: 10px;
            background-color: chocolate;
            line-height: 198px;
        }

        .item3,
        .item4,
        .item5,
        .item6 {
            height: 198px;
            width: 178px;
            border: 1px solid black;

            background-color: yellow;
            line-height: 198px;
            margin-right: 10px;
        }

        .bottom {
            margin-top: 10px;
        }

        .item7,
        .item8,
        .item9 {
            width: 198px;
            height: 128px;
            border: 1px solid 1px;
            line-height: 128px;
            margin-bottom: 10px;
            background-color: green;
        }
    </style>
</head>

<body>
    <!-- 盒子模块 -->
    <div class="container">
        <!-- 页面头部 -->
        <div class="page-header clearFD">
            <div class="logo leftFD">logo</div>
            <div class="banner1 leftFD">banner1</div>
            <div class="banner2 leftFD">banner2</div>
        </div>
        <!-- 设置菜单 -->
        <div class="menu">菜单</div>

        <!-- 设置内容区 -->
        <div class="content clearFD">
            <!-- 分左侧 -->
            <div class="left leftFD">
                <!-- 分上侧 -->
                <div class="top clearFD">
                    <div class="itme1 leftFD">栏目一</div>
                    <div class="itme2 leftFD">栏目二</div>
                </div>
                <!-- 分下侧 -->
                <div class="bottom clearFD">
                    <div class="item3 leftFD">栏目三</div>
                    <div class="item4 leftFD">栏目四</div>
                    <div class="item5 leftFD">栏目五</div>
                    <div class="item6 leftFD">栏目六</div>
                </div>
            </div>
            <!-- 分右侧 -->
            <div class="right rightFD">
                <div class="item7">栏目七</div>
                <div class="item8">栏目八</div>
                <div class="item9">栏目九</div>
            </div>
        </div>
    </div>
</body>
</html>