父元素触发BFC,子元素浮动并对兄弟元素影响的思考


一直对清除浮动的两大方法念念不忘:clear是专门为清除浮动而造的CSS属性;触发BFC也能实现(常用overflow:hidden;),但毕竟清除浮动只是顺带完成的。早上突然产生一个疑惑:子元素浮动,父元素触发BFC,那该浮动对兄弟元素影响如何呢?

  • 先扔结论:
父元素触发BFC在其内部开辟一个独立空间,浮动元素只是脱离文档流,但仍在此空间之内,故父元素高度仍会被其空间内最大高度撑开;开辟独立空间,但是元素之间的相互影响还是会尊重原有规则,即浮动元素脱离了文档流,弟弟会移动到下面,仍然会文字环绕
父亲BFC,儿子浮动对兄弟影响

本文章著作权归饥人谷_九霄和饥人谷所有,转载须说明来源

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1 92
  • 文章版权归饥人谷_Lyndon以及饥人谷所有。 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分...
    HungerLyndon阅读 2,402评论 4 10
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 965评论 0 2
  • 1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 概念:在CSS当...
    饥人谷_任磊阅读 679评论 0 3
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 896评论 0 4