浮动二 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动二</title>
    <style type="text/css">
    
        .box1{
            /*
                文档流中，子元素的宽度默认占父元素的全部
            */
            /* width: 100px; */
            height: 100px;
            background-color: #BBFFAA;
        
            /*box1向左浮动*/
            /*
                当元素设置浮动以后会完全脱离文档流
                块元素脱离文档流之后，高度和宽度都被内容撑开
            */
            /* float: left; */
            
            
            
            
            /*
                浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围
                可以通过浮动来设置文字环绕图片的效果
            */
        }
        .s1{
            /*
                内联元素脱离文档流之后会变成块元素
            
            */
           float: left;
            width: 100px;
            height: 100px;
            background-color:#FFFF00;
        }
        
    </style>
</head>
<body>
    <div class="box1">a</div>
    
    <span class="s1">hello</span>

















   <!-- <p class="p1">
        中国究竟是文明最古的地方，也是素重人道的国度，对于人，是一向非常重视的。
        至于偶有凌辱诛戮，那是因为这些东西并不是人的缘故。皇帝所诛者，“逆”也，
        官军所剿者，“匪”也，刽子手所杀者，“犯”也，满洲人“入主中夏”，
        不久也就染了这样的淳风，雍正皇帝要除掉他的弟兄，
        就先行御赐改称为“阿其那”与“塞思黑”〔２〕，我不懂满洲话，
        译不明白，大约是“猪”和“狗”罢。黄巢〔３〕造反，以人为粮，
        但若说他吃人，是不对的，他所吃的物事，叫作“两脚羊”。 -->
        
    </p>




</body>
</html>

浮动元素在文档流中特点

　　块元素设置浮动以后会完全脱离文档流，脱离文档流之后，高度和宽度都被内容撑开

　　浮动的元素不会盖住文字，文字自动环绕在浮动元素的周围，可通过浮动来设置文字环绕图片的效果

　　内联元素脱离文档流之后会变成块元素

posted @ 2021-07-05 11:12  2237774566  阅读(24)  评论(0)    收藏  举报