为了账号安全,请及时绑定邮箱和手机立即绑定

为什么清除浮动要设置成width:100%呢?

为什么清除浮动要设置成width:100%呢?

正在回答

3 回答

我的理解:设定了over:hidden;后,浮动的块不重叠了,而是相邻的关系,又因为width=100%,所以它需要的宽度是整个一行,所以只能够靠换行来实现,这相当于清除浮动。

也不知道理解的对不对呢。

0 回复 有任何疑惑可以回复我~
#1

qq_伊藤_03776080 提问者

哦~这样理解好像有点懂了,谢谢大神
2016-10-26 回复 有任何疑惑可以回复我~

重发一遍。

  1.<p>设置overflow:hidden触发BFC。

“Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

   2.p作为block container box,其中的内容与不在一个BFC的float元素是互不影响的。按理说,这样就已经能够保证p中inline-level的内容不受float元素的影响了

  The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3.CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower. 

  3.最后p加入width:100%(注意,这里100%是相对父元素的宽度的计算值Calculated value)只不过是为了形成“换行”而已

                                                                  --https://www.w3.org/TR/CSS21/visuren.html#img-inline-layout

0 回复 有任何疑惑可以回复我~
#1

qq_伊藤_03776080 提问者

谢谢啦
2016-10-29 回复 有任何疑惑可以回复我~

“Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.”

   2.p作为block container box,其中的内容与不在一个BFC的float元素是互不影响的。按理说,这样就已经能够保证p中inline-level的内容不受float元素的影响了

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3.CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower. 

  3.最后p加入width:100%(注意,这里100%是相对父元素的宽度的计算值Calculated value)只不过是为了形成“换行”而已

                                                                --https://www.w3.org/TR/CSS21/visuren.html#img-inline-layout

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
网页布局基础
  • 参与学习       214707    人
  • 解答问题       1756    个

让你精通CSS中三大定位机制,彻底掌握网页布局的相关知识

进入课程

为什么清除浮动要设置成width:100%呢?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信