1.浮动的本质:是为了让多个块级元素在一行上显示
2.为什么需要清除浮动:有些时候我们的父盒子不方便给高度。而是让子盒子的内容撑开盒子,这样会导致父盒子的高度为0,清除浮动后父盒子能检测出高度
3.一行有一个元素浮动后,其他元素均需设置浮动 避免布局错乱(开发细节)
4.嵌套的盒子 子盒子设置浮动,定位后 在设置margin-top ,则不会存在外边距塌陷问题(开发细节)
5.使用浮动可清除行内块级元素(input button img)的空隙(开发细节)
<!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>css float的本质</title>
<!-- 浮动的本质是为了多个块级元素在一行上显示 -->
<style>
* {
padding: 0;
margin: 0;
}
/* 浮动的三个特性 浮(脱标不占有位置),漏,特 */
/* 父盒子如果有border padding margin的情况时浮动盒子是如何摆放的 */
.father {
width: 200px;
height: 200px;
/* border: 10px solid purple;
padding: 20px; */
margin: 20px;
background-color: pink;
}
.one {
float: left;
width: 50px;
height: 50px;
background-color: yellowgreen;
}
/* 浮动的盒子只影响后面的盒子 */
/* 很多时候我们的父盒子不方便给高度,由盒子的内容撑开高度 */
.father1 {
width: 200px;
background-color: pink;
}
.one1,
.two1 {
float: left;
/* width: 100px; */
background-color: red;
}
.two1 {
background-color: tomato;
}
/* 清除浮动
1.额外标签法在最后浮动的盒子添加,缺点会影响布局 */
.clear {
clear: both
}
/* 后面三种都是给父盒子设置 子不教父之过 */
/*2.缺点会影响元素无法显示全 */
.father1 {
/* overflow: hidden; */
/* overflow: auto;
overflow: scroll; */
}
/*3.单伪元素 */
.clearfix::after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; /*ie6 7 的写法 */
}
/* 4.双伪元素清除浮动 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* 清除行内块元素的空隙 */
.clear_interspace input,
.clear_interspace button {
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="one"></div>
</div>
<div class="father1 clearfix">
<div class="one1">
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="two1">
<p>1234</p>
<p>1234</p>
<p>1234</p>
<p>1234</p>
</div>
<!-- <div class="clear"></div> -->
</div>
<div class="clear_interspace">
<input type="text">
<input type="text">
<button>按钮</button>
<img src="./1.png" alt="">
</div>
</body>
</html>