浮动布局的使用

最新推荐文章于 2024-03-21 19:18:07 发布

m0_60526657

最新推荐文章于 2024-03-21 19:18:07 发布

阅读量88

点赞数 3

文章标签：浮动元素清除浮动 overflow: hidden 伪元素布局调整

本文链接：https://blog.csdn.net/m0_60526657/article/details/119758032

版权

浮动布局
    1)float属性(如果一个元素添加了float属性，那么这个元素就会成为一个浮动元素)
        取值：
        left          向左浮动元素
        right       向右浮动元素
        none     【默认值】，不浮动
        inherit    浮动方式继承父元素
     浮动元素的特点：
        1）当一个元素是浮动元素的时候，他会失去对父元素的支撑
         清除浮动：位于浮动元素下的非浮动元素会显示到浮动元素的下面，非浮动元素中的文字会环绕在浮动元素周围，这并不是我们想要的。要想让该非浮动元素位于浮动元素之后（单独一行）需要清除浮动。

1.给父元素添加overflow：hidden
2.使用伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局</title>
    <style>
        body{
            margin: 0;
        }
        .one,
        .two,
        .three{
            width: 300px;
            height: 100px;
            float: left;/*向左浮动元素*/
        }
        .one{
            background-color: blue;
        }
        .two{
            background-color:blueviolet;
        }
        .three{
            background-color:crimson;
        }
        .main{
            overflow: hidden;
        }
        .main::after{/*选中之后的不存在的节点，可配合content属性进行内容填充*/
            display: block;
            content: '';
            clear: both;/*伪元素清除浮动*/
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div>hello</div>
</body>
</html>

m0_60526657

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动布局的使用

浮动布局 1)float属性(如果一个元素添加了float属性，那么这个元素就会成为一个浮动元素) 取值： left 向左浮动元素 right 向右浮动元素 none 【默认值】，不浮动 inherit 浮动方式继承父元素浮动元素的特点： 1）当一个元素是浮动元素的时候，他会失去对父元素的支...
复制链接

扫一扫