css浮动

一天睡25小时

于 2023-07-17 17:39:56 发布

阅读量35

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_63448336/article/details/131771600

版权

文章展示了HTML中使用CSS样式进行浮动布局的方法，包括左浮动、清除浮动以防止父级元素塌陷，以及右浮动的实现。通过示例代码，解释了如何处理浮动元素对布局的影响以及解决浮动后父元素高度问题的常见策略。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        /* 1. 脱离标准文档流
            影响： 破坏了布局，导致布局错乱
            2.不脱离文本流
        */

        /* 规范：
        
            同级之间，加float属性，其余的也要加
        */
        .div1{
            width: 50px;
            height: 101px;
            background-color: pink;
            float: left;
        }
        .div2{
            width: 500px;
            height: 102px;
            background-color: yellow;
            float: left;
        }
        .div3{
            width: 550px;
            height: 100px;
            background-color: red;
            float: left;

        }
        .div4{
            width: 200px;
            height: 100px;
            background-color: green;
            float: left;

        }
    </style>
</head>
<body>
    <div class="div1">1111111</div>
    <div class="div2">2222222</div>
    <div class="div3">3333333</div>
    <div class="div4">4444444</div>
</body>
</html>




浮动2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动2</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            border: 5px solid red;
            list-style: none;
            /* height: 102px; */
            /* 溢出隐藏 */
            /* overflow: hidden; */
        }
        /* ul::after{
            content: '';
            display: block;
            clear: both;

        } */
        li{
            /* width: 100px; */
            height: 300px;
            border: 1px solid #000;
            float: left;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* 浮动导致 父级盒子塌陷
        
        解决办法：

        1. 父级盒子加高（不能自动撑开，高是固定的，不够灵活）
        2. 父级盒子加 overflow: hidden; （自动撑开，但会导致溢出的部分无法显示）
        3. 加一个无内容的空盒子：clear: both;（必须无意义无宽高）
        4. 父盒子加伪类属性 ::after { content: '';display:block; clear:both}(达到添加无意义空盒子的效果且不受影响)
        */
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        .clear::after{
            content: '';
            display: block;
            clear: both;

        }
        .box{
            width: 50px;
            height: 50px;
            border: 1px solid yellow;
            float: left;
        }
    </style>
</head>
<body>
    <ul class="clear">
        <li>这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字</li>
        <li>
            <ul  class="clear">
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
            </ul>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <!-- <div style="clear: both;"></div> -->
    </ul>
    <div></div>
</body>
</html>


右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右浮动</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        li{
            width: 100px;
            height: 100px;
            border: 1px solid pink;
            float: right;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>