网站项目建设的组织机构,在线做免费网站,全国小微企业名录查询,网站域名注册备案教程css浮动 1. 设置浮动2. 浮动的特点3. 浮动的影响4. 解决浮动的影响4.1 解决父元素高度塌陷的问题4.2 解决对兄弟元素影响问题 1. 设置浮动
浮动是通过float属性设置#xff0c;float取值范围#xff1a;
none#xff1a;不浮动#xff0c;默认值。left#xff1a;向左浮… 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;}/stylediv classfirst/div
div classsecond/div浮动元素会在一行内排列显示并且元素顶部对齐。
style.first {height: 100px;width: 100px;background-color: red;float: left;}.second {height: 200px;width: 200px;background-color: blue;float: left;}
/stylediv classfirst/div
div classsecond/div任何元素都可以添加浮动添加浮动的元素就具有行内块元素的特性。
style.first {height: 200px;width: 200px;background-color: red;float: left;}/stylespan classfirst我是一个行内元素加了浮动/spanspan是一个行内元素无法设置宽高。当给它设置浮动后就变成了一个行内块元素可以设置宽高了。
3. 浮动的影响
元素浮动后会脱离标准流后面的兄弟元素会占据浮动元素之前的位置前面的兄弟元素无影响。元素浮动后不能撑起父元素的高度导致父元素高度塌陷父元素的宽度依然束缚浮动的元素。
style.parent {width: 100px;background-color: red;}.child {height: 100px;float: left;}/stylediv classparentdiv classchild我是一个浮动的子元素/div
/divps执行上面代码你会发现一父元素没有红色的背景因为子元素浮动后父元素没有高度你会发现二子元素的内容换行了因为父元素的宽度依然束缚着浮动的子元素。
4. 解决浮动的影响
4.1 解决父元素高度塌陷的问题
方式一给父元素设置高度。
style.parent {width: 100px;height: 100px;background-color: red;}.child {height: 100px;float: left;}/stylediv classparentdiv classchild我是一个浮动的子元素/div
/div方式二给父元素设置一个overflow: hidden
style.parent {width: 100px;background-color: red;overflow: hidden;}.child {height: 100px;float: left;}
/stylediv classparentdiv classchild我是一个浮动的子元素/div
/div4.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;}
/stylediv classparentdiv classfirst/divdiv classsecond/divdiv classtmp/div
/div
div classtest/divps执行上面代码你会发现classtest的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;
}
/stylediv classparentdiv classfirst/divdiv classsecond/div
/div
div classtest/div如果对伪类选择器不太熟悉可以查看css选择器介绍。
