<!-- HTML源码 --> <!DOCTYPE html> <html lang="en"> <head> 　　<meta charset="UTF-8"> 　　<meta name="viewport" content="width=device-width, initial-scale=1.0"> 　　<meta http-equiv="X-UA-Compatible" content="ie=edge"> 　　<title>布局</title> 　　<link rel="stylesheet" href="9.css"> </head> <body> 　　<div class="container"> 　　　　<!-- div块，独占一行，用float --> 　　　　<!-- div.div${div$]*6} --> 　　　　<!-- 这里默认有个<before>开始标签 --> 　　　　<div class="div1">div1</div> 　　　　<div class="div2">div2</div> 　　　　<div class="div3">div3</div> 　　　　<div class="div4">div4</div> 　　　　<div class="div5">div5</div> 　　　　<div class="div6">div6</div> 　　　　<!-- 这里默认有个<after>结束标签 --> 　　</div> </body> </html>   ---- /*css源码*/ div{ 　　/*div 所展示的是样式称为流*/ 　　width: 100px; 　　height: 100px;   　　border: 1px solid black;/*线框*/ 　　background: greenyellow;   　　float: right;右浮动 　　/*浮动 　　float: left; 左浮动 　　float: right;右浮动 　　*/ }
.div1{ 　　float: left;/*左浮动*/ 　　background: red;/*背景颜色*/ 　　width: 100px; 　　height: 200px; } .div3,.div4{ 　　float: right;/*右浮动*/ 　　background:blue;/*背景颜色*/ 　　width: 150px; 　　height: 150px; } .div2{ 　　clear: both;/*清楚，让浮动回到标准流里，使上面的自己独占一行*/ }
/*伪元素使用*/ /*这样就完成了元素的清浮动*/ .container::after{ 　　content: " ";/*content 可以添加文字，图片 或者添加一个空格*/ 　　/*after是行元素，在这里要变成块元素， 所以使用 display: block； */ 　　display: block; 　　clear: both;/*清元素*/ }
/*伪元素 清理浮动和margin*/ .container::before,.container::after{ 　　counter:" "; 　　display:table; }
.container::after{ 　　clear: both; }
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄