div+css里的清除和浮动是什么意思?
展开全部
“清除”就是clear这个属性的中文解释,“浮动”是float这个属性的中文解释。
清除(clear)的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开,相当于这个元素独立成一行,其它元素不管宽度大小,都不能和这个元素并排显示。如果是clear:right;就相当于这个元素右边的内容会被排除开,但是左边的不会,仍然可以在同一行显示。
浮动(float)则是控制元素在一行内的显示位置,例如float:left;就表示这个元素会显示在这一行的左边,如果是float:right则表示这个元素会显示在一行的右边。通常情况下,应用了float的元素,浏览器会认为它同时也意味着会与相邻的元素在同一行内显示,但是这个规则在IE6等浏览器里面并不会被严格执行,有时即使定义了float属性,浏览器还是默认认为这个元素是clear:both的,所以一般定义了float之后,还要定义一个display:inline;才可以实现多个元素在同一行内显示的效果。
清除(clear)的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开,相当于这个元素独立成一行,其它元素不管宽度大小,都不能和这个元素并排显示。如果是clear:right;就相当于这个元素右边的内容会被排除开,但是左边的不会,仍然可以在同一行显示。
浮动(float)则是控制元素在一行内的显示位置,例如float:left;就表示这个元素会显示在这一行的左边,如果是float:right则表示这个元素会显示在一行的右边。通常情况下,应用了float的元素,浏览器会认为它同时也意味着会与相邻的元素在同一行内显示,但是这个规则在IE6等浏览器里面并不会被严格执行,有时即使定义了float属性,浏览器还是默认认为这个元素是clear:both的,所以一般定义了float之后,还要定义一个display:inline;才可以实现多个元素在同一行内显示的效果。
2013-04-10
展开全部
浮动和清除浮动一般用在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的影响
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的影响
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-04-10
展开全部
下面代码保存为网页到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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-04-10
展开全部
呵呵,很简单么.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懂了没有
就可以给C来个clear:left,这样C就可以在另一行了 right同理.both是清除两者. 嗯...也许clear这个不能举例说,还是说实际的布局吧. 在我们写div的时候要经常用到float那么没有加float属性的div很容易受到已经加了float样式的div影响 而导致我们常说的窜位,那么这个时候我们就要用到clear来清除浮动的影响,来让这个div显示在我们想要的位置上.不知LZ懂了没有
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-04-10
展开全部
float 浮动,,,left ,right,,none ,,,
clear ,,,清楚float 浮动,,,有时没什么作用!!!
clear ,,,清楚float 浮动,,,有时没什么作用!!!
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询