html和css布局中的浮动布局

html和css的布局方式之—浮动（float）

浮动：指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它，可以解决图文环绕等问题。
浮动的基本特征：
1.当一个元素浮动后，元素必定为块盒，display值为block
2.浮动元素所占的位置为父元素的内容盒。

高度塌陷:在元素浮动的过程中，由于常规流盒子在排列时不会考虑浮动的盒子，然后在计算高度的过程中就会发生高度塌陷。

 <style> 
.box{            
background-color:white;            
width: 1000px;            
height: 250px;        
}        
.box div{            
width: 100px;            
height: 100px;            
background-color: green;            
float: left;        
}        
.box .box1{            
width: 1000px;            
height: 120px;            
background-color: blue;            
float: none;        
}        
p{            
width: 1000px;            
height: 120px;            
background-color: yellow;        
}    
</style>

这就是高度塌陷的例子。
## 解决高度塌陷的方法：
1、在发生高度塌陷的父元素里面加入一个空盒子，这样可以消除浮动带来的影响，不过会多创建一个新的元素。
2、用clear伪类元素选择器：

.clearfix::after {
content: " ";        
display: block;        
clear: both;
}
隐藏元素：display：none，元素隐藏且不占位置
                   visibility：hidden，隐藏元素，但是元素任然存在在页面当中。
                   opacity：0~1，调节透明度