HTML&CSS基础-完善clearfix
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.抛出问题
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>完善clearfix</title> <style type="text/css"> .box1{ width: 300px; height: 300px; background-color: red; } .box2{ width: 300px; height: 200px; background-color: yellow; /** * 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。 * 使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。 */ margin-top: 100px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
2>.浏览器打开以上代码渲染结果
二.使用空table解决问题
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>完善clearfix</title> <style type="text/css"> .box1{ width: 300px; height: 300px; background-color: red; } .box1:before{ content: ""; /*将一个元素设置为表格显示*/ display: table; } .box2{ width: 300px; height: 200px; background-color: yellow; /** * 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。 * 使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。 */ margin-top: 100px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
2>.浏览器打开以上代码渲染结果
三.完善clearfix的最终版本
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>完善clearfix</title> <style type="text/css"> .box1{ width: 300px; height: 300px; background-color: red; } .box2{ width: 300px; height: 200px; background-color: yellow; /** * 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。 * 使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。 */ margin-top: 100px; } .box3{ border: 10px blue solid; } .box4{ width: 100px; height: 100px; background-color: deeppink; float: left; } /** * 解决父子元素的外边距重叠 * * .box1:before{ * content: ""; * 将一个元素设置为表格显示 * display: table; * } /** * 解决父元素高度塌陷 * * .clearfix:after{ * content: ""; * display: block; * display: table; * clear: both; * } * / /** * 经过修改后的clearfix是一个多功能的，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠 */ .clearfix:after, .clearfix:before{ content: ""; display: table; clear: both; } /*兼容IE6*/ .clearfix{ zoom: 1; } </style> </head> <body> <div class="box3 clearfix"> <div class="box4"></div> </div> <div class="box1 clearfix"> <div class="box2"></div> </div> </body> </html>
2>.浏览器打开以上代码渲染结果
