其他分享
首页 > 其他分享> > 前端基础---浮动(二) 文字环绕

前端基础---浮动(二) 文字环绕

作者:互联网

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color: #bfa;
                /*
                 * 浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围,
                 *     所以我们可以通过浮动来设置文字环绕图片的效果
                 */ 
                 
                /*box1向左浮动*/
                float: left;
                
            }
            
            .p1{
                background-color: yellow;
            }
            
        </style>
    </head>
    <body>
        
        <div class="box1"></div>
        
        <p class="p1">
            在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。
这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。
我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。
枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。
鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。
哇的一声,夜游的恶鸟飞过了。
        </p>
        
    </body>
</html>

 

 

 

脱离文档流后

不管是块元素还是内联元素都会是块元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            .box1{
                /*
                 * 在文档流中,子元素的宽度默认占父元素的全部
                 */
                background-color: #bfa;
                
                /*
                 * 当元素设置浮动以后,会完全脱离文档流.
                 *     块元素脱离文档流以后,高度和宽度都被内容撑开
                 */
                /*float: left;*/
            }
            
            .s1{
                /*
                 * 开启span的浮动
                 *     内联元素脱离文档流以后会变成块元素
                 */
                float: left;
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
            
        </style>
    </head>
    <body>
        
        <div class="box1">a</div>
        
        <span class="s1">hello</span>
        
    </body>
</html>

 

标签:浮动,天空,前端,元素,100px,---,文档,background
来源: https://www.cnblogs.com/leiyanting/p/14957812.html