浮动的特点 

<!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>
        .box1 {
            background-color: green;
            float: left;
        }

        .box2 {}

        /* 
1.浮动元素不会盖住文字，自动环绕
2.元素设置浮动后会从文档流中脱离，元素脱离文档流后的特点：
    2.1块元素不再独占一行
        2.2脱离文档流后，块元素的高度和宽度默认被内容撑开
    
    行内元素脱离文档流后变为块元素，特点和块元素一样
        
    脱离文档流后不再区分块元素和行内元素

 */
    </style>
</head>

<body>
    <div class="box1"> hello</div>
    <div class="box2">hello</div>
</body>

</html>

 

posted @ 2021-02-18 11:34  俗气小博  阅读(116)  评论(0)    收藏  举报