收藏
批改状态：合格
老师批语：写得不错, 没写总结, 下次注意
1、消除子元素浮动造成父元素高度折叠的影响
出现这种情况是由于父元素无高度，而子元素有高度；或者父元素有高度但是小于子元素高度。这是给父元素加入overflow: hidden; 就可以解决问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
width: 500px;
background-color: blue;
border: 1px dashed #ff0000;
}
.son {
width: 200px;
height: 200px;
background-color: aquamarine;
float: left;
}
.father {
overflow: hidden; /*添加高度属性*/
}
</style>
</head>
<body>
<div class = "father"> <!--为包含的***元素设置类-->
<div class = "son">这是子元素</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、三列布局的实现原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
.wrapper{
width: 920px;
margin: 0 auto;
}
.content{
overflow: hidden;
}
.content-secondary{
width: 230px;
float: left;
/*防止IE中的双外边距产生的bug*/
display: inline;
background-color: #ccc;
}
.content-main{
width: 670px;
float: right;
display: inline;
}
.content-left{
width: 400px;
float: left;
display: inline;
background-color: coral;
}
.content-right{
width: 230px;
float: right;
display: inline;
padding-right: 20px;
background-color: #89ad10;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>这是三列布局页面</h1>
</header>
<article>
<div class="content">
<div class="content-secondary">
<p>左侧区域</p>
</div>
<div class="content-main">
<div class="content-left">
<p>主区域</p>
</div>
<div class="content-right">
<p>g右侧区域</p>
</div>
</div>
</div>
</article>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
