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,调节透明度