解决CSS子级float而父级不能自适应的问题

墨蓝 2021-11-10 08:32 257阅读 0赞

# **目录** #

> 尴尬场景
> 
> 解决方法1
> 
> 解决方法2
> 
> 解决方法3

--------------------

## 尴尬场景 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    	<style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	.main{
    		padding: 10px;
    		border: #000000 1px solid;
    	}
    	.sub1{
    		width: 30%;
    		height: 100px;
    		float: left;
    		border: #000000 1px solid;
    	}
    	.sub2{
    		width: 65%;
    		height: 100px;
    		float: right;
    		border: #000000 1px solid;
    	}
    </style>
    </head>
    <body>
    	<div class="mui-content">
    		<div class="main">
    			<div class="sub1">
    
    			</div>
    			<div class="sub2">
    
    			</div>
    		</div>
    	</div>
    </body>
    </html>

## 解决方法1 ##

给父标签添加overflow：hidden属性

![201908021434056.png][]

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    	<style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	.main{
    		padding: 10px;
    		border: #000000 1px solid;
            overflow: hidden;
    	}
    	.sub1{
    		width: 30%;
    		height: 100px;
    		float: left;
    		border: #000000 1px solid;
    	}
    	.sub2{
    		width: 65%;
    		height: 100px;
    		float: right;
    		border: #000000 1px solid;
    	}
    </style>
    </head>
    <body>
    	<div class="mui-content">
    		<div class="main">
    			<div class="sub1">
    
    			</div>
    			<div class="sub2">
    
    			</div>
    		</div>
    	</div>
    </body>
    </html>

## 解决方法2 ##

父级标签内添加清除浮动的子级标签

![20190802143550512.png][]

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    	<style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	.main{
    		padding: 10px;
    		border: #000000 1px solid;
    	}
    	.sub1{
    		width: 30%;
    		height: 100px;
    		float: left;
    		border: #000000 1px solid;
    	}
    	.sub2{
    		width: 65%;
    		height: 100px;
    		float: right;
    		border: #000000 1px solid;
    	}
    	.sub3{
    		clear: both;
    	}
    </style>
    </head>
    <body style="padding: 20px">
    	<div class="mui-content">
    		<div class="main">
    			<div class="sub1">
    
    			</div>
    			<div class="sub2">
    
    			</div>
    			<div class="sub3"></div>
    		</div>
    	</div>
    </body>
    </html>

## 解决方法3 ##

如果知道子级标签的高度的话，那就给父级添加固定高度吧

![20190802144016816.png][]

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    	<style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	.main{
    		padding: 10px;
    		border: #000000 1px solid;
    		height: 120px;
    	}
    	.sub1{
    		width: 30%;
    		height: 100px;
    		float: left;
    		border: #000000 1px solid;
    	}
    	.sub2{
    		width: 65%;
    		height: 100px;
    		float: right;
    		border: #000000 1px solid;
    	}
    </style>
    </head>
    <body style="padding: 20px">
    	<div class="mui-content">
    		<div class="main">
    			<div class="sub1">
    
    			</div>
    			<div class="sub2">
    
    			</div>
    		</div>
    	</div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70]: /images/20211109/f319f3dffd2747c38d0515e53653d0a9.png
[201908021434056.png]: /images/20211109/46caecbe773948199886672c240db649.png
[20190802143550512.png]: /images/20211109/8abc0e4d48204290b39ece3e11de2c16.png
[20190802144016816.png]: /images/20211109/7156260469eb46fe918c54841cc9c665.png