CSS浮动

块级元素：独占一行

h1~h6 p div 列表…

行内元素：不独占一行

span a img strong…

行内元素可以被包含在块级元素中

display 浮动 #father{ border:1px solid black; height: 800px; } .layer01{ border:1px dashed gainsboro; display:inline-block; float: left; } .layer02{ border:1px dashed blue; display:inline-block; float: right; } .layer03{ border:1px dashed gray; display:inline-block; float: right; } .layer04{ border:1px #666 dashed; font-size:12px; line-height: 23px; display:inline-block; float:right; clear:both; } 父级边框塌陷问题

解决方法：

增加父级元素高度 #father{ border:1px solid black; height: 800px; } 增加一个空的div标签，清除浮动 .clear{ clear:both; margin:0; padding:0; } 在父级元素中增加overflow:hidden #father{ border:1px solid black; overflow:hidden; } 父类添加一个伪类: after 使用最广泛 #father:after{ content:''; display:block; clear:both; } 对比 display方向不可控float浮动起来会脱离标准文档流，要解决父级边框塌陷问题。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。