浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<!-- part1 -->
<style type="text/css">
.article {
width: 300px;
border: 1px solid black;
}
.eg img {
width: 148px;
/*块级:独占一行*/
display: block;
/*浮动后:可以同行显示(只占自身显示区域)*/
float: left;
}
.eg {
display: none;
}
</style>
<!-- part2 -->
<style type="text/css">
.sup {
width: 300px;
height: 300px;
background-color: orange;
}
.sub {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
font: 900 40px/100px 'STSong';
text-align: center;
}
/*BFC横向布局规则为从左至右,且block box同行显示(之间没有间隔)*/
/*注: 从左至右可以理解横坐标正方向为右*/
.sub {
float: left;
}
/*BFC横向布局规则为从右至左,且block box同行显示(之间没有间隔)*/
/*注: 从右至左可以理解横坐标正方向为左*/
.sub {
float: right;
}
/*.sub:nth-child(2) {
margin-right: -100px;
}*/
.p2 {
display: none;
}
</style>
<!-- part3 -->
<style type="text/css">
.sp {
width: 300px;
background-color: orange;
}
.sb {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
font: 900 40px/100px 'STSong';
text-align: center;
}
.sb:nth-child(2) {
/*margin-top: -80px;*/
/*文本层次高于背景层次*/
/*2的背景只能遮挡1的背景,但不能遮挡1的文本*/
/*background-color: pink;*/
/*父级的高度最终决定于逻辑最后位置上的子级的盒子底端*/
}
.sb {
float: left;
}
/*显示区域重叠,文本区域正常(与显示区域共同讨论就不正常)*/
.br {
width: 300px;
height: 100px;
background-color: yellowgreen;
}
/*恢复正常:父级刚好拥有存放所有子级的高度(合适高度)*/
.sp {
height: 100px;
}
/*总结(坑):当target标签的内部有浮动的子级,target的兄弟标签布局会出现显示异常*/
</style>
</head>
<body>
<!-- part3 -->
<!-- 浮动产生的问题(坑):父级未设置固定高度,不再撑开父级高度 -->
<div class="p3">
<div class="sp">
<div class="sb">1</div>
<div class="sb">2</div>
</div>
<div class="br">1234512345123451234512345</div>
</div>
<!-- part2 -->
<!-- 基本语法:float: left | right -->
<div class="p2">
<div class="sup">
<div class="sub">1</div>
<div class="sub">2</div>
</div>
</div>
<!-- part1 -->
<!-- 解决的问题:让block box同行显示 -->
<!-- eg:文本环绕 -->
<div class="eg">
<div class="article"><img src="img/icon.jpg" alt="">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
</div>
</body>
</html>
