第二大核心-浮动/前端四
标准流
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;/*新盒模型*/
}
div{
width: 200px;
height: 200px;
font: normal 900 50px/50px "微软雅黑"; /*字体是否倾斜 900字体粗细 字体大小/字体行高 字体类型*/
text-align: center;
line-height: 200px;/*字体快行高*/
color: white;
}
.box1{
background-color: yellow;
}
.box2{
background-color: green;
}
.box3{
background-color: grey;
}
.box4{
background-color: darkred;
}
</style>
</head>
<body>
<!--把竖排盒子变成横排叫浮动-->
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
<div class="box3">盒子三</div>
<div class="box4">盒子四</div>
</body>结果如下：
清除浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*浮动 css2
float:left/right/both
拥有浮动属性的元素已经脱标，导致后续元素占领原有元素位置。
影响 1.父盒子高度塌陷，原因是父盒子高度不占位置
(1)父盒子高度塌陷（管住孩子 BFC），加在父级元素身上，这个方法不实际因为要经常改动height。
.father{
border: #333333 solid 2px;
height: 200px;}
（2）溢出隐藏 加在父盒子身上overflow: hidden; 有用的内容也会被清除
加在子级身上 <div class="box4">盒子4</div>最后一个盒子身上，自他以下不再浮动
（3）clear:both 结构（块级元素） 清除浮动：
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
<div style="clear: both"></div>
伪元素
（4）.clearFix::after,clearFix::before{
content='';
line-height:0px;
display-block:inline-block;
clear:both;
}
*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;/*新盒模型*/
}
.father{
border: #333333 solid 2px;
/* height: 200px;*/
/*
overflow: hidden;
*/
}
.box1,.box2,.box3,.box4{
width: 200px;
height: 200px;
font: normal 900 50px/50px "微软雅黑"; /*字体是否倾斜 900字体粗细 字体大小/字体行高 字体类型*/
text-align: center;
line-height: 200px;/*字体快行高*/
color: white;
float: left;
}
.box1{
background-color: yellow;
float: left;
}
.box2{
background-color: green;
}
.box3{
background-color: grey;
}
.box4{
background-color: darkred;
}
</style>
</head>
<body>
<!--把竖排盒子变成横排叫浮动-->
<div class="father">
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
<div style="clear: both"></div>
</div>
<p style="width: 500px;height: 200px;background-color: green">adsda</p>
</body>
</html>结果如下：
浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*浮动 css2
float:left/right/both
拥有浮动属性的元素已经脱标，导致后续元素占领原有元素位置。
影响 1.父盒子高度塌陷，原因是父盒子高度不占位置
*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;/*新盒模型*/
}
.father{
border: #333333 solid 2px;
}
.box1,.box2,.box3,.box4{
width: 200px;
height: 200px;
font: normal 900 50px/50px "微软雅黑"; /*字体是否倾斜 900字体粗细 字体大小/字体行高 字体类型*/
text-align: center;
line-height: 200px;/*字体快行高*/
color: white;
float: left;
}
.box1{
background-color: yellow;
float: left;
}
.box2{
background-color: green;
}
.box3{
background-color: grey;
}
.box4{
background-color: darkred;
}
/*下面为清除浮动大方式*/
.clearFix::after,clearFix::before{
content: '';
line-height: 0px;
display: block;
clear: both;
}
</style>
</head>
<body>
<!--把竖排盒子变成横排叫浮动-->
<div class="father clearFix">
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
<p style="width: 500px;height: 50px;background-color: #333333">adsda</p>
</div>
</body>
</html>