<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="浮动.css">
</head>
<body>
<div class="main">
<!-- <div class="left">
left
</div>
<div class="right">
right
</div> -->
<!-- <div class="a">
asdfasdfaa啊水水水水水水水水水水水水水水
</div>
<div class="b">
111111111111111111111
</div>
<span>
alsdfjklasjd
</span> -->
</div>
<!-- <ul class="box">
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
</ul> -->
<div class="box clearf">
<div>alsdkfj</div>
<div>
asdfsadf
</div>
<div>
asdfsadf
</div>
<div class="clearfix"></div>
</div>
<div class="other">
</div>
</body>
</html>
/* float属性用于创建浮动框,将其移动到一边. */
.main {
overflow: hidden;
}
/* .left,
.right {
width: 400px;
height: 300px;
background-color: red;
}
.left {
float: left;
}
.right {
float: right;
} */
/* 1.浮动的盒子脱离标准流的控制
2.浮动的盒子不再保留原来的位置
3.如果多个盒子设置了浮动,则它们会按照属性值
一行内显示并且顶端对齐排列
4.浮动的元素是互相贴靠在一起的(不会有缝隙),如果
父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐.
5.任何元素都可以浮动
6.不管是什么模式的元素,浮动之后都具有行内块元素相似的特性
7.如果块级盒子没有设置宽度,设置浮动之后,她的大小根据内容来决定
*/
/* .a,
.b {
float: left;
height: 200px;
background-color: red;
}
.a {
float: left;
height: 100px;
background-color: blue;
}
span {
float: right;
width: 500px;
height: 300px;
background-color: darkcyan;
} */
/* * {
margin: 0;
padding: 0;
}
.box {
margin: 0 auto;
width: 1226px;
height: 300px;
background-color: pink;
}
li {
list-style: none;
}
.box li {
width: 296px;
height: 285px;
background-color: purple;
float: left;
margin-right: 14px;
}
.box li:last-of-type {
margin-right: 0;
} */
/* 清除浮动
为什么要清除浮动:
父级盒子没有高度,子盒子浮动了,影响下面盒子的布局
1.overflow
2. 额外标签法
3.after伪元素方法*/
.box {
/* overflow: hidden; */
margin: 0 auto;
border: 1px solid purple;
width: 500px;
}
.box>div:not(:last-of-type) {
height: 200px;
width: 200px;
background-color: red;
float: left;
}
/* 第二种清除浮动的方法 */
/* .box .clearfix {
clear: both;
} */
.other {
height: 200px;
background-color: gray;
margin: 0 auto;
}
/* 第三种方法 */
.clearf::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearf {
*zoom: 1
}