div+css里的清除和浮动是什么意思？

Question

如题所述

Answer 1

“清除”就是clear这个属性的中文解释，“浮动”是float这个属性的中文解释。

清除（clear）的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开，相当于这个元素独立成一行，其它元素不管宽度大小，都不能和这个元素并排显示。如果是clear:right；就相当于这个元素右边的内容会被排除开，但是左边的不会，仍然可以在同一行显示。

浮动（float）则是控制元素在一行内的显示位置，例如float:left;就表示这个元素会显示在这一行的左边，如果是float:right则表示这个元素会显示在一行的右边。通常情况下，应用了float的元素，浏览器会认为它同时也意味着会与相邻的元素在同一行内显示，但是这个规则在IE6等浏览器里面并不会被严格执行，有时即使定义了float属性，浏览器还是默认认为这个元素是clear:both的，所以一般定义了float之后，还要定义一个display:inline；才可以实现多个元素在同一行内显示的效果。

Answer 2

浮动和清除浮动一般用在DIV+CSS布局时，通常情况下使用DIV+CSS布局，文档中的对象都是从上自下依次排列，比如你写<div id="a"></div><div id="b"></div>那么默认情况下id为b 的div 排在 a的下方，我们称这种布局为标准流，设置浮动后对象就脱离了标准流，就像水面上的漂浮物一样，不再严格的按照标准流排列。浮动的取值如下：left：对象浮在左边
right：对象浮在右边
clear 清楚左，，右 浮动。。。例如下面的代码：<div id="container" > <div id="left"></div> <div id="right“></div> <div id="bottom></div></div>此时left right bottom 3个div 是从上到下排列，如果我们给left 添加一个浮动属性 float:left,那么3个div会从左到右排列，这是因为left 的浮动也会影响到后面的对象，如果我们给bottom 添加一句clear:both,那么bottom就不会再排在right的右边了，这是因为我们用clear:both清除了前面浮动对象对bottom的影响

Answer 3

下面代码保存为网页到Firefox或ch、op浏览器下去看(IE低版本会自动清理浮动，不存在此问题)：
<div id="test">
<p>浮动1</p>
<p>浮动2</p>
</div>

<h4>不清除浮动的话上面div不能正确的包裹住两个浮动的p元素，失去了范围，导致下面的h4内容会跟着乱</h4>
<p>而如果你清理了浮动，就不存在这个问题</p>
<p>你把这句代码加到#test的样式表里面再刷新，div就能正确包住浮动的p了：overflow: hidden;</p>
<p>当元素设置有宽度时，使元素具有overflow属性是清理浮动方法的一种</p>

<style>
#test{
width:300px;
border: 1px red solid;
}

#test p{
width:100;height:100px;
background: #eee;
float:left;
}

</style>

Answer 4

呵呵,很简单么.left 和 right 是用来对其的,比如两个div想要排列成一行, 就要用到做浮动和有浮动, 至于左右 不用我解释了把?inherit是缺省值,自动继承父div.clear简单的说比如A和B同行float:left了,这时候有个C不想float:left 和AB同一行,
就可以给C来个clear:left,这样C就可以在另一行了 right同理.both是清除两者. 嗯...也许clear这个不能举例说,还是说实际的布局吧. 在我们写div的时候要经常用到float那么没有加float属性的div很容易受到已经加了float样式的div影响 而导致我们常说的窜位,那么这个时候我们就要用到clear来清除浮动的影响,来让这个div显示在我们想要的位置上.不知LZ懂了没有

Answer 5

float 浮动，，，left ，right，，none ，，，
clear ，，，清楚float 浮动，，，有时没什么作用！！！