课程
/前端开发
/HTML/CSS
/网页布局基础
为什么设置width:100%;overflow:hidden能清除浮动呢?像半天没想明白啊?
2015-07-19
源自:网页布局基础 3-2
正在回答
严格来说,是只有在p的宽度加上两个div的宽度大于浏览器的宽度时才会清除浮动影响,100%的宽度+两个div的宽度是没问题的,甚至小一点90%都可以,具体可以多小是要看两个div的宽度加上去为准的。但如果你设置固定宽度为100px的话,是不可能换行的,也就是不能清除浮动的影响的,因为这明显小于浏览器的宽度,设置overflow:hidden是为了溢出时隐藏的,这里看来,我的理解是文字不能超出这个范围,因为设置了宽度,如果宽度不够大的话会自动换行,这时候就和正常的p是一样的,所以才需要两个值都设置,而且你要注意固定宽度的值
<script>alert('dd')</script>
严格讲,不是“清除浮动”,浮动根本没有清除,应该说“清除浮动的影响”。
p设置overflow后,会把他的子元素变成block,等于说p的包裹范围变大了,并且以内容的边界进行包裹。
此时,p本身是受到float影响的,但内容并不受float影响,还是按照flow的方式占行。
所以等于并没有hidden,而是让内容显示出来了。
总体来说,p是没清楚浮动的,但内容并不受浮动影响,看起来就是清除浮动了
举报
让你精通CSS中三大定位机制,彻底掌握网页布局的相关知识
购课补贴联系客服咨询优惠详情
慕课网APP您的移动学习伙伴
扫描二维码关注慕课网微信公众号