[css] float浮动属性及其破坏性

1.引言

　　正在学习css，float属性可以使元素脱离文档流，进行左右浮动。但是这个属性好用的同时，也带来了许多问题。在此做个简单的记录。

2.float用法：

　　以块级元素为例，因为html页面遇块换行，所以块级元素通常都是从上至下布局的

　　（最外围的黑色框框请忽略）

假如我们需要页面左右布局，那么我们可以通过float属性来使两个盒子进行浮动：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 500px;height: 400px;border: 2px solid black;margin: auto;">
            <div style="float: left; width: 100px;height: 80px;background-color: firebrick;text-align: center;line-height: 80px;">
                div1
            </div>
            <div style="float: right; width: 150px;height: 80px;background-color: seagreen;text-align: center;line-height: 80px;">
                div2
            </div>
            
        </div>
    </body>
</html>

大部分网页的布局都不是简单的上中下，而是还分了左右布局，以博客园首页为例

这个网页的模式如下

导航栏
主体栏，分左中右三个分栏
页脚

我们仿照首页来做一个简单的布局：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .header{
                height: 30px;
                text-align: center;
                background-color: cadetblue;
            }
            .main{
                height: 340px;
                width: 100%;
            }
            .left{
                float:left ;
                width: 25%;
                height: 200px;
                text-align: center;
                background-color: orange;
                line-height: 200px;
            }
            .right{
                float:right;
                width: 25%;
                height: 330px;
                text-align: center;
                background-color: orange;
                line-height: 330px;
            }
            .footer{
                height: 30px;
                text-align: center;
                background-color: rosybrown;
            }
        </style>
    </head>
    <body>
        <div style="width: 500px;height: 400px;border: 2px solid black;margin: auto;">
            <div class="header">导航栏</div>
            <div class="main">
                <div class="left">左分栏</div>
                <div class="right">右分栏</div>
                <div>中间部分</div>
            </div>
            <div class="footer">页脚</div>
        </div>
    </body>
</html>