浮动

 

html标签：
分为两大类的标签：
1、块元素
特点：独占一行，默认的宽度是整行的宽度，默认的高度是由它里面包含的内容决定的，给它指定宽（width）和高(height)
例如：
h1~h6 p ul li ol dl dt dd....

2、内敛元素
特点：可以跟其他元素共处一行，默认的宽度和高度是由它里面包含的内容决定的，即使给它指定宽（width）和高(height)也不起作用
例如：
a span strong em img...

背景颜色

两大类型的标签是可以相互转换的
display显示
值：
block 块
inline 内敛
inline-block 具有两个块和内敛的共同的特点，缺点：两个元素之间有一个无法消除的间隙
none 隐藏
flex 弹性盒子

浮动float
让块元素可以共处一行
值：
none 默认，不浮动
left　向左浮动（用的多的）
right 向右浮动

浮动会导致出现父级元素失去高度
解决方案：
四种解决方案的
1、给父元素一个高度 height
2、给父元素中所有子元素后面添加一个空元素（标签对之间没有任何内容）
<标签></标签>
清除浮动clear
值：
left 不让左边出现浮动的元素
right 不让右边出现浮动的元素
both 不让两边出现浮动的元素
3、让父元素进行溢出处理,缺点：对select下拉列表无效
overflow
值：
visible 默认的,始终可见
hidden 隐藏的，把多余的部分剪切掉
scroll 出现滚动条
auto 自动
4通过::after选择器在父元素后增加一个空的块元素，完美的解决方案
父元素::after{
content:"";
display:block;
clear:both;
}