代码改变世界

float的一点想法

2016-01-28 14:42  大城小鼎  阅读(405)  评论(0)  编辑  收藏  举报

刚写代码的时候，突然有个问题，float加在父级元素上和加在子级元素上有什么区别，还有浮动清除的一些问题

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main{
            width: 1000px;
            background-color: bisque;
            overflow: hidden;
        }
        .fl{
            float: left;
        }
        .wh200{
            width: 200px;
            height: 200px;
            margin-left: 20px;
            background-color: aqua;
        }
        .clear{
            clear: both;
        }
        .main2{
            width: 1000px;
            background-color: blue;
            height: 400px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="fl wh200"></div>
    <div class="fl wh200"></div>
    <div class="fl wh200"></div>
</div>
<div class="main2"></div>
</body>
</html>

清楚浮动两种方式

1. 父级加 overflow: hidden;

2. 最后一个子级加clear:both

这里的浮动是加在子级元素上的，并且通过 overflow: hidden清楚浮动；如果不加浮动清除，那么main1这个父级div是没有高度的，这会导致main2这个div浮上来，如下效果

 

 

还有不存在什么父级元素加了浮动，子级元素也浮动，float:left这个属性加给谁，谁就参与浮动。

 

总结：

 

套路框架：第一层：页面整体框架overflow:hidden清除浮动；第二层：就是第一层里面的一些元素，比如header里面的logo,search这些，定义高度就行。

<div style="width: 1000px;overflow: hidden">
    <div style="float: left;width: 330px">
        <div style="width: 200px;height: 50px"></div>
        <div style="width: 130px;height: 50px;"></div>
    </div>
    <div style="float: left;width: 330px"></div>
    <div style="float: left;width: 330px"></div>
</div>
<div style="width: 1000px;overflow: hidden">
    <div style="float: left;width: 330px"></div>
    <div style="float: left;width: 330px"></div>
    <div style="float: left;width: 330px"></div>
</div>