关于clear和浮动

来源：互联网发布：工程预算软件手机版编辑：程序博客网时间：2024/05/10 16:35

关于clear属性，W3C上的解释是规定哪一侧不允许其他浮动元素，确实有点不好理解，为好更加好的了解clear属性我们不妨运用一下立体思维。首先，我们把<body>想象成一个框，把里面的元素想象成大小不一，厚度不一的拼图，接下来我们想像一下这个框的横截面：

横截面

光是一张图可能有点难以理解，我们同过几个实例来详细分析一下；在实践中，我们经常遇到因为内部元素浮动导致撑不开外部元素的情况，原因是因为内部浮动的元素和外部元素不在同一层中。

<div id="c1" style="width:1000px;background:red"><div id="c2" style="width:800px;height:800px;background:green;float:left"></div></div>

我们会发现内部浮动的c2撑不开外部的c1；让我用立体思维想一下，横截面如下：

虚线的代表是原本未浮动c2的横截面位置，实线代表的是浮动后c2的位置，红色的线代表包裹c2的c1，我们把c1想像成一条橡皮筋（左边一头固定），假如c2没有浮动的话，c2与c1还处于同一层，c2就能把c1撑开；但是，因为c2的浮动，导致c1和c2不在同一层，虽然从上方看（我们平时看的角度上看）没有异常，但实际上c1和c2已经不在同一层上了，所以c2不能将c1撑开，就好比橡皮筋里面要有东西才能将这个橡皮筋撑开。

接下来我们在说说clear属性，既然float可以让元素浮动，那我们就把clear的作用想象成给元素“增高”。

<div id="c1" style="width:1000px;background:red">  <div id="c2" style="width:800px;height:800px;background:green;float:left"></div>  <div id="c3" style="width：800px；height：400px;background:blue;clear:both"></div></div>

clear属性让元素”长高“，横跨两层，横截面如下：

虚线的代表是原本未浮动c2的横截面位置，实线代表的是浮动后c2的位置，红色的线代表包裹c2的c1，我们把c1想像成一条橡皮筋（左边一头固定），右边蓝色的代表添加了clear属性的c3,因为添加了clear属性，使c3长高横跨两层，让c3不会被c2遮挡，同时还撑开了c1。

阅读全文

0 0