浮动元素的值

• float:left 元素向左浮动

效果图

1.png

源代码

css

        .left{
            float: left;
            width: 200px;
            height: 200px;
            background-color: orange;
        }

html

• float:right 元素向右浮动

效果图

2.png

源代码

css

        .right{
            float: right;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

html

• float:none 默认值。元素不浮动，安装正常的文档流排列方式

效果图

3.png

源代码

css

        .left{
            float: none;
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .right{
            float: none;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

html

• float:inherit 规定应该从父元素继承float属性的值

效果图

4.png

源代码

css

        .warp{
            float:left;
        }
        .left{
            float: inherit;
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .right{
            float: inherit;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

html