题目: 实现一个两列布局,左侧宽度150,右侧自适应
这是一段完整的代码
<!DOCTYPE html>
<html>
<head>
<title>BFC</title>
<meta charset="utf-8"/>
<style>
.wrap{
width:300px;
position: relative;
border:1px solid #000;
}
.aside{
width:100px;
height: 150px;
float: left;
background: red;
}
.main{
height: 200px;
background: yellow;
overflow: hidden;
}
.par{
border:5px solid #000;
width:300px;
overflow: hidden;
}
.child{
border:5px solid #f66;
width:100px;
height:100px;
float: left;
}
p{
color:red;
background: #fcc;
width:200px;
line-height: 200px;
text-align: center;
margin: 100px;
}
.wrapP{
overflow: hidden;
}
</style>
</head>
<body>
<h1>自适应两栏布局</h1>
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>
<h1>清除内部浮动</h1>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
<h1>防止垂直margin重叠</h1>
<p>哈哈</p>
<div class="wrapP">
<p>haha</p>
</div>
</body>
</html>
image.png
image.png
这是效果,
BFC是块级格式化上下文,一个创建了新的BFC 的盒子是独立布局的,盒子内元素的布局不会影响盒子外部的元素,在同一个BFC中的两个相邻的盒子在垂直方向发生margin 重叠的问题
实现一个两列布局,左侧宽度150,右侧自适应
方法二 左边position:absolute;右边margin-left:200px;
<div class="wrap">
<div class="left1" style="position: absolute;">left1</div>
<div class="right1" style="margin-left:200px;">right1</div>
</div>
方法三 左边浮动,右边margin-left
<div class="wrap">
<div class="left1" style="float:left;">left1</div>
<div class="right1" style="margin-left:200px;">right1</div>
</div>
方法四 position :absolute 也能达到效果
<div class="wrap">
<div class="left1" style="position:abxolute;left:0;top:0;width:150px">left1</div>
<div class="right1" style="position:abxolute;left:150px;width:100%;top:0;">right1</div>
</div>
