您的位置：首页 > 其它

子div元素为float时如何撑开父元素

2016-02-26 11:18 274 查看

方法一：

该方法关键在于用clear:both清除了浮动元素，把父元素parent撑开了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css">
.parent{
border: 1px solid red;
}
.child1{
float: left;width:200px;
}
.child2{
float:left;width:200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">2</div>
<div class="child2">3</div>
<div style="clear: both;"></div>
</div>
</body>
</html>

方法二：
该方法的重点在于，子元素有float后，父元素需要设置一个overflow：hidden；，这样就可以撑开父元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css">
.parent{
border: 1px solid red;
overflow: hidden;
}
.child1{
float: left;width:200px;
}
.child2{
float:left;width:200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">2</div>
<div class="child2">3</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航