标准流之间的转换
在学习这个之前我们要先了解一下行内元素和行内块元素:
1.块元素
一定是独占一行，可以设置宽高。如:ul,ol,li,from,h1-h6,hr,p,table,div等
2.行内块元素
不独占一行，可以设置宽高。如:button,img,input,select等
3.行内元素
不独占一行，不可以设置宽高。如:span,a,label等
标准流就是上面三种元素的统称，可以用display元素进行转换。
1.块元素→行内元素(display:inline;)
(独占一行，可设置宽高，变为不独占一行，不可设置宽高)
例如:
<style>
.hh{
width: 200px;
height: 200px;
background-color: red;
display: inline;
}
.xx{
width: 200px;
height: 200px;
background-color: aqua;
display: inline;
}
</style>
</head>
<body>
<div class="hh"></div>
<div class="xx"></div>
</body>
2.行内元素→块元素(display:block;)
(不独占一行，不可设置宽高，变为可设置宽高独占一行)
例如:
<style>
span{
width: 200px;
height: 200px;
background-color: red;
display: block;
}
</style>
</head>
<body>
<span>小括号</span>
</body>
display:block;(块元素)
inline-block;(行内块元素)
inline;(行内元素)
none;(隐藏)
因为这些可置换元素本身就具备宽高属性所以可以发生转换。
浮动
用display将块元素转化为行内元素时，元素之间会出现默认间隔，如ul 。使用style中使用浮动就可以避免这种情况。
语法:float:left/right; (靠左或靠有浮动)
(我们可以依靠浮动用ul实现以上内容)
我们浮动的时候，后面跟着的部分元素会跟着浮动，那如果不想让它们浮动就需要消除浮动
(没有消除浮动后面的p元素跟着一起浮动)
如何清除浮动？
方法①:给浮动的父元素加一个高度
<style>
.a{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.b{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.big{
height: 200px;(针对上面的例子此处给付元素添高)
}
</style>
</head>
<body>
<div class="big">
<div class="a"></div>
<div class="b"></div>
</div>
<p>你好我是p1</p >
<p>你好我是p2</p >
</body>
效果:
方法②:给浮动下面建一个空的div起名叫dear fix
针对前面的例子:
<style>
.a{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.b{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="big">
<div class="a"></div>
<div class="b"></div>
<div class="clearfix"></div>
</div>
<p>你好我是p1</p >
<p>你好我是p2</p >
</body>
clear:both;左右都清空也可以用clear:left;
也可以使用伪类清除浮动不做过多了解了。
