核心提示:例:!DOCTYPE htmlhtml lang=zh-CNheadmeta charset=utf-8/stylebody{margin:0;padding:0;}.p0{width:400px;b...
例:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <style> body{margin:0;padding:0;} .p0{width:400px;background-color:skyblue;} .p2,.p3{width:100px;height:100px;background-color:red;float:left;} </style> </head> <body> <p class="p0"> <p class="p2"></p> <p class="p3"></p> </p> </body> </html>
此时父元素p0无法包含子元素,解决办法:
1.给父元素设置overflow .p0{overflow: hidden;} 2.增加一个子元素,设置clear: both; <p></p> 3.给父元素设置float .p0{float:left;} 缺陷:需要给父元素设置宽度。 4.移动端经常使用的方法 给父元素添加类class="clearfix" .clearfix::after,.clearfix::before{ content: ""; height:0; line-height: 0; display: block; visibility: hidden; clear: both; }