<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浮动(float)布局效果</title>
<style>
*{
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;
}
</style>
</head>
<body>
<!-- 浮动本质的作用是实习图文混排的效果 -->
<!-- 标准流
标准流也叫文档流，指的是标签在页面默认的排布规则，例如：块级元素独占一行，行内元素可以一行显示多个
-->
<!-- 浮动
作用：让块级元素水平排列
特点：顶对齐，具备行内块显示模式特点
属性名：float
属性值：
left：左对齐
right：右对齐
注意：加了浮动属性的盒子，会脱标（不会占有标准流的位置）
-->
<!-- <div class="box1">box1</div>
<div class="box2">box2</div> -->
<!-- 产品布局
版心：左右，右面：8个产品相当于 8个li标签
细节：如果父级宽度不够，浮动的盒子会掉出父级区域
-->
<!-- 清除浮动
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能会导致页面布局混乱）
解决方法：清除浮动（清除浮动带来的影响）
1.额外标签法：在父级元素内容的最后添加一个块级元素，设置css属性clear:both（清除两侧浮动的影响）
注意：得加一个空标签并设置css属性
2.单伪元素法：直接在div加clearfix类
.clearfix::after{
content:'';
display:block;
clear:both;
}
注意：同一个div用两个类，只需用空格隔开
如<div class='box1 box2'></div>
3.双伪元素(推荐):直接在div加clearfix类
.clearfix::before,
.clearfix:after{
content:'';
display:table;(一个大格子,里面有行,行里面是一个一个的单元格)
}
.clearfix::after{
clear:both;
}
before是用来解决外边距塌陷问题的,after是解决浮动问题
4.overflow:父元素添加css属性overflow:hidden
原理:有问题的原因是父级无法被子级撑开高度范围,overflow:hidden会检查父级的范围,这样高度就检查到了
-->
<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>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
