51 lines
2.2 KiB
HTML
51 lines
2.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Document</title>
|
|||
|
|
<style>
|
|||
|
|
*{
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
.box{
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
background: pink;
|
|||
|
|
}
|
|||
|
|
.box1{
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
background: red;
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
.hr{
|
|||
|
|
width: 200px;
|
|||
|
|
}
|
|||
|
|
.zongjie{
|
|||
|
|
font-size:18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
.zhu{
|
|||
|
|
color:black
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="box">你好</div>
|
|||
|
|
<p class="hr">我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字</p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="box1">你好</div>
|
|||
|
|
<p class="hr">我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字</p>
|
|||
|
|
<!-- box1默认样式时，p标签的内容会出现在红色div的下方 -->
|
|||
|
|
|
|||
|
|
<p class="zongjie">总结：当box1加上float:left 时，如果文字的宽度不超过红色div的宽度 那么文字会在红色div的下面 如果文字宽度超过div的宽度，那么文字会环绕红色div</p>
|
|||
|
|
<div class="zongjie zhu">原因：浮动的破坏性在于切断Linebox(行盒)链，致使高度塌陷，由于浮动元素仍在dom树中，实体是看得见摸得着的，所以他占据的位置还是在的</div>
|
|||
|
|
<div class="zongjie zhu">解释:脱离文档流 是将元素从普通的布局排版中拿走，其他盒子定位的时候，会当做脱离文档流的元素不存在进行定位。但是，使用float 使元素脱离文档流时，其他盒子会无视这个元素，但其他盒子的文本依然会为这个元素让出位置，环绕在四周</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|