标签：设置 char one lang spl 对比 flow clear content
5 浮动
标准文档流
块级元素：独占一行
h1~h6 p div 列表。。。
行内元素：不独占一行
span a img strong
行内元素可以被包含在块级元素中，反之，则不可以~
5.2 display 却可以这样做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<!--
black 块元素
inline 行内元素
inline-block,是块元素，但是可以内联，在一行！
none 消失
float 浮动
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
float:right;
/*float: both; 清除浮动*/
}
span{
width: 100px;
height: 100px;
border:1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
5.3 float
1.左右浮动
5.4，父级边框塌陷的问题
clear
clear: right 右侧不允许有浮动元素
clear: left: 左侧不允许有浮动元素
clear: both 两侧不允许有浮动元素
clear: none 没有浮动
解决方案：
1.增加父级元素的高度
2.增加一个空的div标签清除浮动
<div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
3,overflow
在父级元素中增加一个 overflow:hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style>
#content{
width: 150px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="content">
<img src="image/1.jpg" >
<p>
指一个人发出的笑声，高兴开心欢乐时的状态，抒发快乐的心情，表现一个人很开心快乐的状态。
</p>
</div>
</body>
</html>
4.父类添加一个伪类： ：after
#content:after{
content: "";
display: block;
clear: both;
}
小结：
5.5 对比
标签：设置 char one lang spl 对比 flow clear content
原文地址：https://www.cnblogs.com/202116xi/p/14527471.html
