#############总结##########
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; /*外边距*/ padding: 0; /*内边距*/ } .c1,.c2{ width: 100px; height: 100px; background-color: red; border: 1px solid black; } .c3{ width: 100%; height: 100px; background-color: yellow; } .c2{ float: right; /*把c2放右边*/ } .c1{ float: left; } /*c3默认会盖过c1 c2 设置伪类选择器,设立给他加空白 设置成block 让他占位子 清除浮动*/ .clearfix:after{ content: ''; display: block; clear: both; } .cc:before{ /*清除浮动的标识*/ } </style> </head> <body> <div class="cc clearfix"> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3" > </div> </body> </html>
