CSS3-浮动

最新推荐文章于 2024-04-03 00:12:55 发布

只字不留

最新推荐文章于 2024-04-03 00:12:55 发布

阅读量156

点赞数

本文链接：https://blog.csdn.net/qq15045846160/article/details/88651099

版权

一、浮动流是指半脱离标准流的排版方式（只有left和right）。
1、特点：
（1）不区分三种元素（行内、块级、行内块级）。
（2）浮动的元素不能撑起父元素的高度。
2、浮动元素排序规则：
（1）相同方向上的浮动元素，先浮动的在前面。
（2）不同方向上的浮动，左浮动找左浮动，右浮动找右浮动。
（3）浮动元素浮动之后的位置由浮动元素之前在标准流中的位置决定。
二、清除浮动流。
1、给前面一个父元素设置高度

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .box1{
                height: 21px;
            }
            .box1 p{
                background-color: pink;
                width: 50px;
            }
            .box2 p{
                background-color: blue;
                width: 50px;
            }
            p{
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
        </div>
        <div class="box2">
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
        </div>
    </body>
</html>

当第一个div里面的p都浮动完后，因为第一个div有了高度，所以第二个div中的在标准流中排在第二行。
2、给后面的盒子添加clear：both; 使元素不在找它前面的左浮动和右浮动。

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .box1 p{
                background-color: pink;
                width: 50px;
            }
            .box2 p{
                background-color: blue;
                width: 50px;
            }
            p{
                float: left;
            }
            .box2{
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
        </div>
        <div class="box2">
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
        </div>
    </body>
</html>

注意点：此元素的margin属性将消失。
3.1、在两个盒子中间添加一个空的div，并为其设置clear属性。

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .box1 p{
                background-color: pink;
                width: 50px;
            }
            .box2 p{
                background-color: blue;
                width: 50px;
            }
            p{
                float: left;
            }
            .wall{
                clear: both;
            }
            .h20{
                height: 20px;
                background-color: #000;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
        </div>
        <div class="wall h20"></div>
        <div class="box2">
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
        </div>
    </body>
</html>

注意点：
（1）前一个盒子的margin-bottom属性将消失。
（2）设置两个盒子之间的距离，可以通过设置 .wall的高度来实现。
3.2、将第一个盒子所有元素的最后面放置一个空div。

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .box1{
                background-color: #ccc;
            }
            .box1 p{
                background-color: pink;
                width: 50px;
            }
            .box2 p{
                background-color: blue;
                width: 50px;
            }
            p{
                float: left;
            }
            .wall{
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
            <div class="wall h20"></div>
        </div>
        <div class="box2">
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
        </div>
    </body>
</html>

注意点：
（1）第一个盒子的margin-bottom属性可以使用。
（2）第二个盒子的margin-top可以使用。
（3）第一个盒子的高度会被内容撑起。
4、利用伪元素选择器。

.box1::after{
                content: "";
                display: block;
                visibility: hidden;
                clear: both;
            }
            /* 为了兼容IE6 */
            .box1{
                *zoom: 1;
            }

与3.2原理相同：
内容为空、的块级元素、并隐藏、然后清除左右浮动。
5、给第一个盒子设置overflow: hidden; 与*zoom：1;

只字不留

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3-浮动

一、浮动流是指半脱离标准流的排版方式（只有left和right）。1、特点：（1）不区分三种元素（行内、块级、行内块级）。（2）浮动的元素不能撑起父元素的高度。2、浮动元素排序规则：（1）相同方向上的浮动元素，先浮动的在前面。（2）不同方向上的浮动，左浮动找左浮动，右浮动找右浮动。（3）浮动元素浮动之后的位置由浮动元素之前在标准流中的位置决定。二、清除浮动流。1、给前面一个父元素...
复制链接

扫一扫