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>. 浏览器打开以上代码渲染结果

posted @ 2017-12-01 23:52 尹正杰阅读(360) 评论(0) 编辑收藏举报

刷新页面返回顶部

尹正杰

HTML&CSS基础-浮动

公告