HTML&CSS基础-浮动

             HTML&CSS基础-浮动

                                          作者:尹正杰

版权声明:原创作品,谢绝转载!否则将追究法律责任。

一.块元素在文档中默认垂直排列

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        
        <style type="text/css">
            /**
             *     块元素在文档流中默认垂直排列,所以这三个div自上至下一次排开
             */
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
            
            .box3{
                width: 200px;
                height: 200px;
                background-color: deeppink;
            }
            
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

2>.浏览器打开以上代码渲染结果

二.块元素之间的浮动

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        
        <style type="text/css">
            /**
             *     块元素在文档流中默认垂直排列,所以这三个div自上至下一次排开,如果希望块元素在页面水平排列,可用使块元素脱离文档流。
             * 
             *     使用float来使元素浮动,从而脱离文档流,该属性有以下常用可选值:
             *         none:
             *             默认值,元素默认在文档流中排列。
             *         left:
             *             元素会立即脱离文档流,向页面的左侧浮动。
             *         right:
             *             元素会立即脱离文档流,向页面的右侧浮动。
             * 
             *     当一个元素设置浮动时(foalt属性是一个非none的值)
             *         元素会立即脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动;
             *         元素浮动以后,会尽量向页面的左上或者是右上漂浮,直到遇到父元素的边框或者其它的浮动元素;
             *         如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素;
             *         浮动的元素不会超过他上边的兄弟元素,最多一边齐;
             * 
             */
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
                float: right;
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                float: right;
            }
            
            .box3{
                width: 200px;
                height: 200px;
                background-color: deeppink;
                float: right;
            }
            
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

2>. 浏览器打开以上代码渲染结果

三.div元素浮动不会覆盖文字内容

1>.HTML源代码

<!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: red;
                /**
                 *     浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可用通过设置浮动来设置文字环绕图片的效果
                 */
                float: left;
            }
            
            .p1{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        
        <p class="p1">
            噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。地崩山摧壮士死,然后天梯石栈相钩连。上有六龙回日之高标,下有冲波逆折之回川。黄鹤之飞尚不得过,猿猱欲度愁攀援。青泥何盘盘,百步九折萦岩峦。扪参历井仰胁息,以手抚膺坐长叹。问君西游何时还?畏途巉岩不可攀。但见悲鸟号古木,雄飞雌从绕林间。又闻子规啼夜月,愁空山。蜀道之难,难于上青天,使人听此凋朱颜!连峰去天不盈尺,枯松倒挂倚绝壁。飞湍瀑流争喧豗,砯崖转石万壑雷。其险也如此,嗟尔远道之人胡为乎来哉!剑阁峥嵘而崔嵬,一夫当关,万夫莫开。所守或匪亲,化为狼与豺。朝避猛虎,夕避长蛇;磨牙吮血,杀人如麻。锦城虽云乐,不如早还家。蜀道之难,难于上青天,侧身西望长咨嗟!
        </p>
    </body>
</html>

2>.浏览器打开以上代码渲染结果

四.内联元素浮动会变成块元素

1>.HTML源代码

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

2>. 浏览器打开以上代码渲染结果

原文地址:https://www.cnblogs.com/yinzhengjie/p/7944910.html