[04-03]布局
<!-- 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;
}
