标准流
浮动
特点：
具备顶对齐，行内块显示特点，浮动的盒子是脱离了标准流。
如果父级的宽度不够，浮动的盒子会掉下来
<style>
.one{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: brown;
float: left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
小米页面的布局
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.product{
margin: 50px auto;
width: 1226px;
height: 628px;
background-color: pink;
}
.left{
width: 234px;
height: 628px;
background-color: blue;
float: left;
}
.right{
width: 978px;
height: 628px;
background-color: brown;
float: right;
}
.right li {
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: orange;
float: left;
}
.right li:nth-child(4n){
margin-right: 0;
}
</style>
</head>
<body>
<div class="product">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
清除浮动
额外标签法
额外添加一个块级清除标签。
<title>Document</title>
<style>
one{
margin: 10px auto;
width: 1280px;
height: 200px;
background-color: pink;
}
.left{
float: left;
width: 200px;
height: 300px;
background-color: skyblue;
}
.right{
float: right;
width: 950px;
height: 300px;
background-color: yellowgreen;
}
.two{
height: 100px;
background-color: red;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="one ">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="two"></div>
</body>单伪元素法
在父级开头加标签
注意：content：“”；
双伪元素
在父级结尾加标签。
befor在这：解决外边界塌陷问题
.clearfix::before,
.clearfix::after {
content: "";
display:table;
}
after：清楚浮动影响。
.clearfix::after{
clear: both;
}
<title>Document</title>
<style>
one{
margin: 10px auto;
width: 1280px;
height: 200px;
background-color: pink;
}
.left{
float: left;
width: 200px;
height: 300px;
background-color: skyblue;
}
.right{
float: right;
width: 950px;
height: 300px;
background-color: yellowgreen;
}
.two{
height: 100px;
background-color: red;
}
/* .clearfix{
clear: both;
} */
/* .clearfix::after{
content:"" ;
display: block;
clear: both;
} */
.clearfix::before,
.clearfix::after {
content: "";
display:table;
}
.clearfix::after{
clear: both;
}
</style>
</head>
<body>
<!-- <div class="one clearfix"> -->
<div class="one clearfix">
<div class="left"></div>
<div class="right"></div>
<!-- <div class="clearfix"></div> -->
</div>
<div class="two"></div>
</body>4.overflow法
给浮动的父级加。
浮动总结
flex布局
组成
主轴对齐方式
display: flex;
/* 默认值 */
/* justify-content: start; */
/* justify-content: end; */
/* justify-content: center; */
/* 把父级剩余尺寸分配成间距，间距相等 */
/* justify-content: space-between; */
/* 间距出现在弹性盒子两侧， */
/* 视觉效果：弹性盒子之间的间距是两端间距的2倍 */
/* justify-content: space-around; */
/* 个个间距都相等 */
justify-content:space-evenly ;
在侧轴对齐方式
align：使一致，排列;校准;(尤指)使成一条直线;排整齐;
item:项目;一则，一条(新闻);一件商品(或物品);
display: flex;
/* 弹性盒子在侧轴没有尺寸才能拉伸 */
/* align-items: stretch; */
/* align-items: center; */
/* align-items: flex-start; */
align-items: flex-end;
修改主轴方向
<title>Document</title>
<style>
div{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: pink;
}
img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div>
<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.2LN_bFdwF2lhpxv-f_R_fAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2" alt="">
<span>媒体</span>
</div>弹性伸缩比
<title>Document</title>
<style>
.box{
height: 500px;
width: 500px;
border: 1px black solid;
display: flex;
flex-direction: column;
}
.box div{
background-color: pink;
}
.box div:nth-child(4){
flex: 1;
border: 1px black solid;
}
.box div:nth-child(3){
flex: 2;
border: 1px black solid;
}
.box div:nth-child(2){
flex: 3;
border: 1px black solid;
}
.box div:nth-child(1){
flex: 4;
border: 1px black solid;
}
div
</style>
</head>
<body>
<div class="box">
<div>4</div>
<div>3</div>
<div>2</div>
<div>1</div>
</div>
</body>换行显示和行对齐方式
flex-wrap：wrap
flex-wrap：no-wrap：这个是默认值
行对齐方式
对单行盒子不生效。
space-evenly:没有代码提示。
<style>
.box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 300px;
border: 1px solid #000;
/* 调整行对其方式 */
/* align-content: start; */
/* align-content:flex-end ; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
align-content: space-evenly;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
