淘先锋技术网

首页 1 2 3 4 5 6 7

一、浮动流是指半脱离标准流的排版方式(只有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;