浮动、清除浮动
文章目录
CSS一共有三种手段，使一个元素脱离标准流文档
- 浮动
- 绝对定位
- 固定定位
浮动
描述浮动：
- 子元素可以撑开父元素，但是当子元素浮动的时候，是不能撑开父元素的
- 在父级元素的结尾加一个属性为clear:both;的div即可
- 对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。他的作用是紧贴内容
浮动是CSS里面布局最多的一个属性。
float：表示浮动的意思。
属性：
- none：表示不浮动，默认。
- left：表示左浮动。
- rigth：表示右浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
/*margin: 0;*/
}
.box1{
width: 300px;
height: 300px;
background-color: red;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: green;
float: right;
}
span{
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<span>路飞</span>
</body>
</html>
我们会发现，三个元素并排显示，.box1和span因为是左浮动，所有紧挨在一起，这种现象是贴边现象。
.box2盒子因为是右浮动，所以紧靠着右边。
浮动的四大特性：
1，浮动的的元素脱标，
2，浮动的元素互相贴靠。
3，浮动的元素由"子围"效果。
4，收缩的效果。
浮动元素的脱标：
脱标：就是脱离了标准文档流。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: yellow;
}
span{
float: left;
width: 300px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">小红</div>
<div class="box2">小黄</div>
<span>顾清秋</span>
<span>顾清秋</span>
</body>
</html>
效果：红色的盒子盖住了黄色的盒子，一个行内的span标签，竟然能够设置宽高了。
原因1：小红设置了浮动，而小黄并没有设置浮动，小红脱离了标准文档流，其实就是他不在页面中占据位置了，此时浏览器认为小黄是标准文档流的第一个盒子，所以就渲染到了页面中的第一个位置上，这种现象，也有一种叫法：浮动元素"飘起来了"。
原因2：所有的标签一旦设置浮动，就能够并排且不区分块元素或行内元素，换言之，能够设置宽高了。
浮动元素互相贴靠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 400px;
background-color: red;
float: left;
}
.box2{
width: 150px;
height: 450px;
float: left;
background-color: yellow;
}
.box3{
width: 300px;
height: 300px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">小红</div>
<div class="box2">小黄</div>
<div class="box3">小绿</div>
</body>
</html>
效果发现：如果父元素有足够的空间，那么小绿就会紧靠小黄，小黄紧靠小红，小红靠着边。
如果没有足够的空间，小绿那么就会靠着小红，若没有足够的空间靠着小红，就会自己靠边。
浮动元素字围效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin:0;
}
div{
float: left;
}
p{
background-color: # 666;
}
</style>
</head>
<body>
<div class="d1"><img src=" ../../images/1.jpg" alt="图片"></div>
<p style="font-size:34px" >顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋</p>
</body>
</html>
效果发现：所谓的字围效果，当div浮动，p不浮动，div遮盖了p。
div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。
浮动元素紧凑效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>紧凑效果</title>
<style>
div{
float: left;
background-color: red;
}
</style>
</head>
<body>
<div>顾清秋</div>
</body>
</html>
谨记：关于浮动，一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清楚浮动。
为什么要清楚浮动：
在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。
大家想，如果我第一版的页面的写完了，感觉非常爽，突然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白，肯定是去每个地方加内容，改图片，然后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是肯定的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 1126px;
/*子元素浮动，父级一般不设置高度*/
}
.box1{
width: 200px;
height: 500px;
float: left;
background-color: red;
}
.box2{
width: 300px;
height: 200px;
float: left;
background-color: green;
}
.box3{
width: 400px;
height: 100px;
float: left;
background-color: blue;
}
.father{
width: 1126px;
height: 600px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>
</body>
</html>
效果发现：如果不给.father一个高度，那么浮动子元素是不会填充父盒子的高度，那么.father2的盒子就会占据第一个位置，影响页面布局。
那么我们知道，浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动！
清除浮动的方法：
1，给父盒子设置高度。
2，clear：both;
3，伪元素清除法
4，overflow：hidden；
给父盒子设置高度：
使用不灵活，会固定父盒子的高度。
clear：both；
clear：意思就是清楚的意思。
有三个值：
- left：当前元素左边不允许有浮动元素，
- rigtht：当前元素右边不允许有浮动元素。
- both：当前元素的左右两边都不允许有浮动元素。
- 给浮动元素后面加一个空的div，并且该元素不浮动，然后设置clear：both。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color:red;
}
.clear{
width: 200px;
height: 200px;
background-color: yellow;
clear:both;
}
</style>
</head>
<body>
<div>
<ul>
<li>python</li>
<li>web</li>
<li>linux</li>
</ul>
</div>
<div class="clear"></div>
</body>
</html>
伪元素清除法(常用)
给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color:red;
}
.clear{
width: 200px;
height: 200px;
background-color: yellow;
/*clear:both;*/
}
.clearfix:after{
content: '.';
height: 0;
clear:both;
display: block;
visibility: hidden;
}
</style>
</head>
<body>
<div class="clearfix">
<ul>
<li>python</li>
<li>web</li>
<li>linux</li>
</ul>
</div>
<div class="clear"></div>
</body>
</html>
overflow:hidden(常用)
overflow属性规定当内容溢出元素框时，发生的事情。
属性值：
visible：默认值，内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便利查看其余内容。
inherit：规定应该从父元素继承overflow属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
overflow: scroll;
}
div{
width: 100px;
height: 100px;
overflow: inherit;
}
</style>
</head>
<body>
<div>顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋</div>
</body>
</html>
