课程day16

float：left / right

元素浮动跳出block称为盒子塌陷

第一种方法，但会造成代码的冗余<div style="clear: both;"></div>（这个div标签是空的）

                      clear：left / right / both/ none（默认）（不允许出现哪一侧的浮动）

第二种方法，给父元素设置高度，但是需要自己调，扩展性不够

第三种方法：给父元素设置 overflow: hidden，但是下拉列表框的情景不能使用

                      visible 默认值。内容不会被修剪，会呈现在盒子之外

                      hidden 内容会被修剪，并且其余内容是不可见的

                      scroll 内容会被修剪，并且横纵向都会添加滚动条

                      auto 如果内容被修剪，只需要在需要的地方添加滚动条

第四种方法，给父元素添加伪类

.box::after{

     content:"";

     display: block;

     clear: both; }

★区别：

display:inline-block，可以让元素排在一行，并且支持宽度和高度，代码实现起来方便，位置方向不可控制，会解析空格

float：可以让元素排在一行并且支持宽度和高度，可以决定排列方向，float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式