*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*.box1{
width: 300px;
height: 300px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
float:right;
} */
.product{
margin: 0 auto;
width: 1226px;
height: 628px;
background-color: pink;
}
li{
list-style: none;
}
/* 两个盒子一左一右 */
.left{
width:234px;
height: 628px;
background-color: skyblue;
float: left;
}
.right{
width: 978px;
height: 628px;
background-color: brown;
float: right;
}
.right li {
width: 234px;
height: 300px;
background-color: orange;
float: left;
margin-bottom: 14px;
margin-right: 14px;
}
/* 找到第四个li和第八个li去掉右侧的margin */
.right li:nth-child(4n){
margin-right:0px;
}
<!– 标准流
标准流也叫文档流,指的是标签在页面默认的排布规则,例如:块级元素独占一行,行内元素可以一行显示多个
–>
<!– 浮动
作用:让块级元素水平排列
特点:顶对齐,具备行内块显示模式特点
属性名:float
属性值:
left:左对齐
right:右对齐
注意:加了浮动属性的盒子,会脱标(不会占有标准流的位置)
–>
<!– box1
box2 –>
<!– 产品布局
版心:左右,右面:8个产品相当于 8个li标签
细节:如果父级宽度不够,浮动的盒子会掉出父级区域
–>
<!– 清除浮动
场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能会导致页面布局混乱)
解决方法:清除浮动(清除浮动带来的影响)
1.额外标签法:在父级元素内容的最后添加一个块级元素,设置css属性clear:both(清除两侧浮动的影响)
注意:得加一个空标签并设置css属性
2.单伪元素法:直接在div加clearfix类
.clearfix::after{
content:”;
display:block;
clear:both;
}
注意:同一个div用两个类,只需用空格隔开
如
3.双伪元素(推荐):直接在div加clearfix类
.clearfix::before,
.clearfix:after{
content:”;
display:table;(一个大格子,里面有行,行里面是一个一个的单元格)
}
.clearfix::after{
clear:both;
}
before是用来解决外边距塌陷问题的,after是解决浮动问题
4.overflow:父元素添加css属性overflow:hidden
原理:有问题的原因是父级无法被子级撑开高度范围,overflow:hidden会检查父级的范围,这样高度就检查到了
–>