浮动(float)布局效果

*{

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会检查父级的范围,这样高度就检查到了

–>