css三列布局-float
使用浮动实现三列布局的注意点是浮动元素需要写在内容元素之前,否则布局是混乱的。这种方式实现三列布局是优点是简单、兼容性好,但缺点是需要清除浮动,否则父盒子的高度无法撑开,可能会导致其他页面元素的布局混乱。
首先给类名为"container"的盒子添加"overflow: hidden"属性,该属性可以使盒子成为BFC,处理浮动元素父盒子高度塌陷的问题。再给类名为"left"的盒子添加"float: left"和"width: 100px"两条属性,首先往左浮动,宽度这里设置100px。继续给类名为"right"的盒子添加"float: right"和"width: 100px"两条属性,往右浮动。最后给类名为"center"的盒子设置外边距"margin: 0px 100px",该属性上下外边距为0px,左右外边距为两边浮动元素的宽度100px,这样保证了中间的内容区域不会被两边的浮动元素覆盖住。注意,HTML文档中两个浮动元素的顺序在内容元素之前。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
overflow:hidden;
}
.left {
border: 1px solid black;
float:left;
width:100px;
}
.right {
border: 1px solid black;
float:right;
width:100px;
}
.center{
margin:0 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
<article class="center"></article>
</section>
</body>
</html>