首页 > 其他分享> > 说说浮动那些事儿

说说浮动那些事儿

2021-11-22 11:06:33 作者：互联网

什么是浮动

CSS 的 Float(浮动)，使元素向左或向右移动，在其周围的元素也会重新排列。
Float(浮动)，往往是用于图像，但它在（盒子）布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动；
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；
浮动元素之后的元素将围绕它；
浮动元素之前的元素将不会受到影响。

彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

clear–清除浮动

<!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>

    <style>
        /* 第一个div盒子 */
        .container{
            width: 400px;
            /* display: inline-block ;  */
            border: 1px solid grey;
        }
        .left{
            background-color: rgb(24,18,18);
            /* display: inline-block ;  */
            height: 400px;
            width: 200px;
            float: left;
        }
        .right{
            background-color:red;
             /* display: inline-block; */
            height: 400px;
            width: 200px;
            float: right;
            }
        .container2{
            width:800px;
            height:200px;
            background-color: blue;  /*蓝色是最下面一层*/
        }
            /*清除浮动第一步，定义一个选择器，名字叫clearfix  */
        .clearfix::after{
                content:"";
                display: block;
                clear:both;
            }
    </style>
</head>
<body>
    <!-- 清除浮动的第二步,在父级元素上加样式 -->
    <div class="container clearfix">
        <!-- 将类选择器添加到clear -->
        <div class="left">left</div>
        <div class="right">right</div>  
    </div>
    <div class="container2"></div>
    
</body>
</html>

标签：浮动,元素,那些,width,background,事儿,display,block
来源： https://www.cnblogs.com/changbusi/p/15587583.html