float示例

如果最后一个div不加clear:both的话   他会跑到页面顶部且在上面两个div的下面  因为上面两个div加了float  已经脱离文档流了 就相当于在浏览器里不存在了  这时浏览器会把最下面没有加浮动的div作为第一个标签现在是页面上   加了clear:both可以强迫浏览器认识上面浮动的两个div  布局也就不会乱了

其实就一句话  clear:both就是清除浮动用的 ，还有一个作用就是如果子标签float超过了父标签的范围，比如父标签的边框或者背景色没有覆盖到子标签，那么使用这个方法也可以使父标签包含子标签




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: greenyellow;width: 100%; height: 60px">
        <div style="width: 20%;background-color:red;float: left">121111111111111111111111111</div>
        <div style="width: 20%;background-color:yellow;float: right">2222222222222222222222</div>
        <div style="clear: both"></div>
        <div style="width: 30%;background-color:blue">2333333333333333333333333</div>
    </div>
</body>
</html>

 

 

posted @ 2018-04-04 00:14  梦中琴歌  阅读(189)  评论(0)    收藏  举报