CSS3权威指南-浮动

时间：2018-09-15 12:17:42 阅读：360 评论：0 收藏：0 [点我收藏+]

基础html，两个浮动元素

<div class="content">
        <div class="red"></div>
        <div class="blue"></div>
    </div>

1、浮动元素不会超出父元素的外边界。所以说是相对于父元素浮动的。

因为浮动了，所以父元素高度坍塌！高度始终是0，所以高度不用管。但是父元素外边界还是存在的

<style>
        .content{
            margin-top: 100px;
            margin-left: 150px;
            width: 700px;
            background-color: #eee;
        }

        .red{
            float: left;
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .blue{
            float: left;
            width: 300px;
            height: 300px;
            background-color: blue;
            display: none;
        }
    </style>

技术分享图片

父元素在这，没有高度，所以宽度也无法显示了

技术分享图片

可以设置一下高度看看具体的位置

技术分享图片

浮动已经脱离文档流，所以说父元素多高，对子元素，没有影响。

2、浮动元素的左边/右边，必须是浮动元素。

就是说浮动元素会紧靠上一个浮动元素，不会覆盖！

宽度够的情况下，是横向排列

都是左边

技术分享图片

一左一右

技术分享图片

如果宽度不够，就会往下挤

<style>
        .content{
            margin-top: 100px;
            margin-left: 150px;
            width: 500px;
            height: 10px;
            background-color: #eee;
        }

        .red{
            float: left;
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .blue{
            float: right;
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>

技术分享图片

浮动永远是安全的，可见的，不会覆盖！

3、浮动元素的顶端，不能比之前的浮动元素高。

就是说ABCD三个元素吧。

    <style>

        *{
            padding: 0;
            margin: 0;
        }

        /*如果content不设置宽高，就继承了body的宽*/
        .content{
            margin-top: 10px;
            margin-left: 15px;
            width: 1000px;
            height: 10px;
            background-color: #eee;
        }

        .red{
            float: left;
            width: 100px;
            height:100px;
            background-color: red;
        }

        .blue{
            float: left;
            width: 500px;
            height: 300px;
            background-color: blue;
        }

        .green{
            float: right;
            width: 100px;
            height: 500px;
            background-color: green;
        }

        .yellow{
            float: right;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="red">A</div>
        <p>pppppppppppppppppppp</p>
        <p>pppppppppppppppppppp</p>
        <p>pppppppppppppppppppp</p>
        <p>pppppppppppppppppppp</p>
        <div class="blue">B</div>
        <div class="green">C</div>
        <div class="yellow">D</div>
    </div>
</body>