CSS浮动 

<!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>Document</title>
    <link rel="stylesheet" href="浮动.css">
</head>

<body>
    <div class="main">
        <!-- <div class="left">
            left
        </div>
        <div class="right">
            right
        </div> -->
        <!-- <div class="a">
            asdfasdfaa啊水水水水水水水水水水水水水水
        </div>
        <div class="b">
            111111111111111111111
        </div>
        <span>
            alsdfjklasjd 
        </span> -->


    </div>

    <!-- <ul class="box">
        <li>2222</li>
        <li>2222</li>
        <li>2222</li>
        <li>2222</li>
    </ul> -->

    <div class="box clearf">
        <div>alsdkfj</div>
        <div>
            asdfsadf
        </div>
        <div>
            asdfsadf
        </div>
        <div class="clearfix"></div>
    </div>

    <div class="other">

    </div>

</body>

</html>


/* float属性用于创建浮动框,将其移动到一边. */

.main {
    overflow: hidden;
}


/* .left,
.right {
    width: 400px;
    height: 300px;
    background-color: red;
}

.left {
    float: left;
}

.right {
    float: right;
} */


/* 1.浮动的盒子脱离标准流的控制
    2.浮动的盒子不再保留原来的位置
    3.如果多个盒子设置了浮动,则它们会按照属性值
    一行内显示并且顶端对齐排列
    4.浮动的元素是互相贴靠在一起的(不会有缝隙),如果
    父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐.
    5.任何元素都可以浮动
    6.不管是什么模式的元素,浮动之后都具有行内块元素相似的特性
    7.如果块级盒子没有设置宽度,设置浮动之后,她的大小根据内容来决定 
    */


/* .a,
.b {
    float: left;
    height: 200px;
    background-color: red;
}

.a {
    float: left;
    height: 100px;
    background-color: blue;
}

span {
    float: right;
    width: 500px;
    height: 300px;
    background-color: darkcyan;
} */


/* * {
    margin: 0;
    padding: 0;
}

.box {
    margin: 0 auto;
    width: 1226px;
    height: 300px;
    background-color: pink;
}

li {
    list-style: none;
}

.box li {
    width: 296px;
    height: 285px;
    background-color: purple;
    float: left;
    margin-right: 14px;
}

.box li:last-of-type {
    margin-right: 0;
} */


/* 清除浮动
为什么要清除浮动:
父级盒子没有高度,子盒子浮动了,影响下面盒子的布局
1.overflow
2. 额外标签法
3.after伪元素方法*/

.box {
    /* overflow: hidden; */
    margin: 0 auto;
    border: 1px solid purple;
    width: 500px;
}

.box>div:not(:last-of-type) {
    height: 200px;
    width: 200px;
    background-color: red;
    float: left;
}


/* 第二种清除浮动的方法 */


/* .box .clearfix {
    clear: both;
} */

.other {
    height: 200px;
    background-color: gray;
    margin: 0 auto;
}


/* 第三种方法 */

.clearf::after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearf {
    *zoom: 1
}

 

posted on 2022-02-03 03:23  历历往事如在昨日  阅读(36)  评论(0)    收藏  举报

导航