如何解决浮动元素无法撑开父元素问题
首先我们看一下问题
<style>
.wrapper {
border: 1px solid black;
}
.content {
width: 100px;
height: 100px;
background-color: #f40;
}
</style>
<div class="wrapper">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
容器可疑包裹div
.content {
width: 100px;
height: 100px;
background-color: #f40;
float: left;
}
但是如果我们设置了float属性就会出现这样问题
为什么会出现这样的情况:因为我们给元素加了float属性,这个元素就有了浮动流,不能被普通块级元素发现。
底层原理:设置了float属性和display:absolute;会被自动转换为inline-block
inline-block元素的特点是宽高如果不设置会根据内部元素撑起大小设置,而block元素则不然,block元素的高有内部元素撑起,宽默认100%;
也是查阅了很多的资料最终终于找到三种解决方法
方法一:给父级元素也设置float属性
(不建议)
原理浮动元素可以发现浮动元素
方法二:在父级元素下面加一个逻辑性块元素为此元素加属性clear:both;
<p class="clear"></p>
.clear {
clear: both;
}
方法三:利用伪元素选择器(推荐使用)
.wrapper::before {
content:"";
display:inline-block;
clear:both;
}
其他风法
给父级加display:inline-block;//注意修改剧中方式margin:0 auto不管用了
用float可以解决编程中的哪些问题:
报纸布局的问题:我们给块级元素比如img标签设置display:inline-block属性或者inline属性都不能让后面紧跟的文字上边界对齐只能下边界对齐,这时我们只需要给块级元素设置float属性就可以解决