<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS3初识(八)布局——高度塌陷最终方案</title> <style> *{ margin: 0; padding: 0; } .box1{ border: 10px solid red; } .box2{ width: 100px; height: 100px; background-color: #bbffaa; float: left; } /*方法二：使用after伪元素标签解决高度塌陷(原理同方法一一样)*/ .box1::after{ /*after伪元素默认下是行内元素*/ display: block; /*content值不能为none*/ content: ''; clear: both; } .box4{ width: 200px; height: 200px; background-color: #bbffaa; } .box5{ width: 100px; height: 100px; background-color: yellowgreen; margin-top: 100px; } /*解决box4外边距重叠*/ .box4::before{ display: table; content: ''; } /*clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题，是一个整合后的功能代码*/ /*clearfix是自己命名的一个类*/ .clearfix::before,.clearfix::after{ content: ''; /*table既可以解决塌陷又可以解决外边距重叠*/ display: table; clear: both; } </style> </head> <body> <div class="box1"> <div class="box2"></div> <!-- 方法一：为了解决塌陷，凭空加了一个box3出来，并设置clear属性(几乎完美) --> <!-- <div class="box3" style="clear: both;"></div>--> </div> <!-- 这里的box4调用了clearfix这个class里面的css --> <div class="box4 clearfix"> <div class="box5"></div> </div> </body> </html>
Web全栈工程师之路(二)——CSS篇(八)——布局——高度塌陷最终方案
猜你喜欢
转载自www.cnblogs.com/lyrebirth-world/p/12732331.html
今日推荐
周排行