首页 > 其他分享> 文章详细

说说浮动那些事儿

2021-11-22 11:06:33 阅读：210 来源： 互联网

标签：浮动元素那些 width background 事儿 display block

什么是浮动

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

说说浮动那些事儿