css浮动
- 1. 设置浮动
- 2. 浮动的特点
- 3. 浮动的影响
- 4. 解决浮动的影响
-
- 4.1 解决父元素高度塌陷的问题
- 4.2 解决对兄弟元素影响问题
1. 设置浮动
浮动是通过float
属性设置,float
取值范围:
- none:不浮动,默认值。
- left:向左浮动。
- right:向右浮动。
2. 浮动的特点
- 浮动的元素会脱离标准流,不再保留原来的位置。
style>
.first {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.second {
height: 200px;
width: 200px;
background-color: blue;
}
style>
div class="first">div>
div class="second">div>
- 浮动元素会在一行内排列显示并且元素顶部对齐。
style>
.first {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.second {
height: 200px;
width: 200px;
background-color服务器托管网: blue;
float: left;
}
style>
div class="first">div>
div class="second">div>
- 任何元素都可以添加浮动,添加浮动的元素就具有行内块元素的特性。
style>
.first {
height: 200px;
width: 200px;
background-color: red;
float: left;
}
style>
span class="first">我是一个行内元素加了浮动span>
是一个行内元素,无法设置宽高。当给它设置浮动后,就变成了一个行内块元素,可以设置宽高了。
3. 浮动的影响
- 元素浮动后,会脱离标准流,后面的兄弟元素会占据浮动元素之前的位置;前面的兄弟元素无影响。
- 元素浮动后,不能撑起父元素的高度,导致父元素高度塌陷;父元素的宽度依然束缚浮动的元素。
style>
.parent {
width: 100px;
background-color: red;
}
.child {
height: 100px;
float: left;
}
style>
div class="parent">
div class="child">我是一个浮动的子元素div>
div>
ps:执行上面代码,你会发现一:父元素没有红色的背景,因为子元素浮动后,父元素没有高度;你会发现二:子元素的内容换行了,因为父元素的宽度依然束缚着浮动的子元素。
4. 解决浮动的影响
4.1 解决父元素高度塌陷的问题
方式一:给父元素设置高度。
style>
.parent {
width: 100px;
height: 100px;
background-color: red;
}
.child {
height: 100px;
float: left;
}
服务器托管网
style>
div class="parent">
div class="child">我是一个浮动的子元素div>
div>
方式二:给父元素设置一个overflow: hidden
style>
.parent {
width: 100px;
background-color: red;
overflow: hidden;
}
.child {
height: 100px;
float: left;
}
style>
div class="parent">
div class="child">我是一个浮动的子元素div>
div>
4.2 解决对兄弟元素影响问题
方式一:在最后一个浮动元素后面,添加一个块元素,并给块元素添加clear: both
。
style>
.first {
height: 100px;
width: 100px;
background-color: aqua;
float: left;
}
.second {
height: 100px;
width: 100px;
background-color: blueviolet;
float: left;
}
.test {
height: 100px;
width: 100px;
background-color: blue;
}
.tmp {
clear: both;
}
style>
div class="parent">
div class="first">div>
div class="second">div>
div class="tmp">div>
div>
div class="test">div>
ps:执行上面代码,你会发现class=test的div,并没有占据浮动元素的位置。因为在它前面添加了一个空div,并且清空的浮动。
方式二:原理与方式一相同,只是实现的方式更加优雅,在实际开发中应用更多。通过伪元素的方式实现。
style>
.first {
height: 100px;
width: 100px;
background-color: aqua;
float: left;
}
.second {
height: 100px;
width: 100px;
background-color: blueviolet;
float: left;
}
.test {
height: 100px;
width: 100px;
background-color: blue;
}
.parent::after {
content: "";
display: block;
clear: both;
}
style>
div class="parent">
div class="first">div>
div class="second">div>
div>
div class="test">div>
如果对伪类选择器不太熟悉,可以查看css选择器介绍。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
Linux gzip命令用于压缩文件。 gzip是个使用广泛的压缩程序,文件经它压缩过后,其名称后面会多出”.gz”的扩展名。 语法 gzip [-acdfhlLnNqrtvV][-S <压缩字尾字符串>][-<压缩效…