浮动demo
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动元素与定位</title> </head> <body> <div class="box" style="width: 300px; height: 300px; background-color: gold; border:1px solid red; antiquewhite; margin: 0 auto; padding: 10px;box-sizing: border-box"> <div class="box1" style="width: 100px; height: 100px; background-color: darkred; float: left;"></div> <div class="box2" style="width: 100px; height: 100px; background-color: dodgerblue;float: right"></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
分析：浮动元素要设置父级元素的高度，因为子元素浮动的时候脱离了标准文档，等于父元素的div没有了高度，所以要设置高度。或者给父元素设置overflow:hidden属性。我们实验发现浮动元素（向左或向右）一直遇到父元素（左上角或右上角）或另一个浮动元素时停止浮动，需要注意的是，如果父元素有padding值，浮动元素无法跨越padding。
三列布局实现原理
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style/style1.css"> <title>Title</title> </head> <body> <div class="container"> <div class="header"> 头部 </div> <div class="main"> <div class="left"> 左侧区域 </div> <div class="content"> 中间区域 </div> <div class="right"> 右侧 </div> </div> <div class="footer">底部</div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.container {
width: 1200px;
margin: 0 auto;
}
.header,.footer{
height:60px;
background-color: green;
}
.main{
position: relative;
background-color: aquamarine;
margin: 5px auto;
/*overflow: hidden;*/
}
.left{
width: 200px;
background-color: red;
height: 800px;
position: absolute;
top: 0;
left: 0;
/*float: left;*/
}
.right{
width: 200px;
background-color: red;
height: 800px;
position: absolute;
top: 0;
right: 0;
/* float: left;*/
}
.content{
min-height: 800px;
background-color: lightseagreen;
/*float: left;*/
}运行实例 »
点击 "运行实例" 按钮查看在线实例
定位一般也要设置父级，一般是给父级设置relative，然后子元素设置absolute.设置之后在设置他的left top值，定位是可以穿越padding值的。
