float 父级元素包浮动的子元素的解决方案

css 浮动模型中。如果某个元素设置了float属性，那么之后的元素都会收到影响。浮动元素有一个问题，当都是块级元素时，浮动元素会产生浮动流导致其他的块级元素看不到浮动的元素。
如果出现这种情况，我们在设置了浮动元素自动排队后，想让父及元素由父级元素中的内容自动将父级元素撑开时发现此时不生效了。父级元素缩到一起了，那么此时我们该如何处理呢？

可以通过属性 clear: both; 清除左右两边的浮动来撑开父级的高度。如下所示

*{margin: 0px;padding: 0px;}
.wrapper{border: solid 1px}
.content{ float:left;
	height: 100px;
	width: 100px;
	background-color: blue;
	opacity: 0.5}
/** 解决方案一
	.split{
		border-top: 0px solid;
		clear: both;
	}
**/

/**解决方案二**/

.wrapper::after{
       display:block;
       content:"";
       clear:both;
}

<!DOCT

YPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float 父级元素包浮动的子元素的解决方案1 </title>
    <link rel="stylesheet" href="float-父级元素包裹住子集浮动元素-父级高度自动撑开.css">
</head>
<body>
    <!--父级元素包住浮动的子级元素（浮动的子级元素自动撑开父的高度）的 解决方法1
        通过加上p 元素 设置p元素的 clear: both; 清除左右两边的浮动。。。。此时p元素自动将父及元素撑开了。
    
        注意浮动元素 float 会影响浮动元素之后的元素。-->
</body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<!--
解决方案1
<p class="split"></p>
-->
</div>
</html>

<!--父级元素包住浮动的子级元素（浮动的子级元素自动撑开父的高度）的
解决方法1(不建议使用此解决方案哦噢噢噢噢)

       通过加上p 元素设置p元素的 clear: both; 清楚左右两边的浮动。。。。此时p元素自动将父及元素撑开了。

       注意浮动元素 float 会影响浮动元素之后的元素。
   解决方法2：
   不改变html 代码结构的前提下处理使用伪类处理
   .wrapper::after{
display:block;
content:"";
clear:both;
}

为什么加上三个属性
wrapper::after是每一个元素在诞生的时候就已经存在两个伪类，
通过before，after 给元素加上内容，因为“产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素” 所以可以通过伪类after 加上空的内容符合文本能看到浮动元素
content:""; 在元素伪类之后加上空的文本：
clear:both; 清除浮动但是有一个问题只有是块级元素才能使用clear:both;属性

display:block; 是因为伪类天生就是inline元素，所以需要将伪类修改为块级元素让clear：both生效
解决方法3：使用bfc 解决因为满足了“产生了bfc 的元素和文本类属性（inline）的元素以及文本都能看到浮动元素”
如果设置了 position:abolute;float:left/right;打内部把元素转换成inline-block；那么此时就无法设置宽高了，必须有内容撑开宽高。
-->

float 父级元素包浮动的子元素的解决方案

猜你喜欢