收藏
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动的运用</title>
<style>
.container01 {
width:460px ;
margin: 10px 20px;
border: 1px dashed #aaa;
padding: 10px 20px;
overflow: hidden;
float:left;
}
.container01 h3{
width: 240px;
height: 30px;
/*display: inline-block;*/
float:left;
}
}
.container01 p{
display: block;
width: 220px;
font-size: 0.75rem;
float:left;
line-height: 30px;
}
#box_par{
width: 200px;
height: 200px;
background-color: #aaa;
float:left;
margin-right: 20px;
display: inline-block;
}
#box_50{
width: 50px;
height: 50px;
background-color: lightcoral;
}
#box_100{
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</div>
<div class="container01">
<div id="box_par"><em style="position: relative; top:120px;left: 80px;">父元素</em>
<div id="box_100" style="margin:auto; "><em style="position: relative; left: 20px; top: 40px;">子元素</em></div>
</div>
<h3>拓展实例一</h3>
<p>如果需要设置子元素垂直方向居中，只需在<span style="color: lightcoral">子元素上设置margin:auto即可。</span></p>
</div>
<div class="container01">
<div id="box_par" style="display:block; width: 100px; height: 100px; padding: 50px;" >
<em style="position: relative; left:20px;top:-30px;">父元素</em>
<div id="box_100" ><em style="position: relative; left: -10px; top: 30px;">子元素</em></div>
</div>
<h3>拓展实例二</h3>
<p>如果需要实现子元素在父元素中水平和垂直方向都居中，设置子元素无效。<br><span style="color: lightcoral">正确的方法是：在父元素上设置padding:50px; 并重新设定父元素宽高分别为100px。</span></p>
</div>
<div class="container01">
<div id="box_par" style="display:block;">
<div style="width: 80px;height: 80px;background-color: lightblue; margin-left:50px;margin-bottom: 20px;">
<em style="position: relative; top:30px;left:10px;">A元素</em>
</div>
<div style="width: 80px;height: 80px;background-color: pink; margin-left:50px;margin-top: 30px;">
<em style="position: relative; top:30px;left:10px; ">B元素</em>
</div>
</div>
<h3>拓展实例三</h3>
<p>在垂直方向的margin属性会发发生折叠，例如本案例中：<br>
A元素: margin-bottom:20px;<br>
B元素: margin-top:30px;<br>
<span style="color: lightcoral">两者间距为：30px；</span></p>
</div>
运行实例 »
点击 "运行实例" 按钮查看在线实例点击 "运行实例" 按钮查看在线实例
绝对定位的方式实现三栏布局：
<!DOCTYPE html>
<html>
<head>
<title>绝对定位（一）</title>
<meta charset="utf-8">
<style>
body{
background-color: #E0E0E0;
text-align: center;
line-height: 30px;
}
/*头部*/
.header{
width: 100%;
height: 41px;
position: fixed;
top: 0px;
z-index: -1px；
}
/*底部*/
.footer{
width: 100%;
height: 100px;
}
/*头部和底部内容容器：用于居中显示*/
.content{
width:1000px;
min-height: 100%;
background-color:#333;
margin: auto;
}
/*主体容器*/
.main{
width: 1000px;
height: 650px;
background-color: #EEE;
position: relative;
margin: auto;
margin-top:45px;
}
.left{
width: 200px;
height: 100%;
background-color: lightblue;
position: absolute;
left: 0;
top: 0;
}
.right {
width: 200px;
height: 100%;
background-color: lightblue;
position: absolute;
right: 0;
top:0;
}
.center{
background-color: lightyellow;
margin:0 210px;
height: 100%;
}
</style>
</head>
<body>
<!-- 头部区域 -->
<div class="header">
<div class="content">头部</div>
</div>
<!-- 主体区域 -->
<div class="main">
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</div>
<!-- 底部区域 -->
<div class="footer">
<div class="content">底部</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
双飞翼布局实现三栏布局
<!DOCTYPE html>
<html>
<head>
<title>双飞翼布局</title>
<meta charset="utf-8">
<style type="text/css">
.header{
width: 100%;
height: 60px;
position: relative;
background-color: #766;
}
.footer{
width: 100%;
height: 90px;
position: relative;
background-color: #766;
}
.content{
width: 1000px;
min-height: 100%;
background-color: #aaa;
margin: auto;
text-align: center;
line-height: 50px;
}
.container{
width: 1000px;
margin: auto;
background-color: yellow;
overflow: hidden;
text-align: center;
line-height: 50px;
}
.wrap {
width: 100%;
background-color: cyan;
float:left;
}
.main{
height: 600px;
background-color: wheat;
margin-left: 210px;
margin-right: 210px;
}
.left{
width: 200px;
min-height: 600px;
background-color: lightblue;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
min-height: 600px;
background-color: lightgreen;
float:left;
margin-left: -200px;
}
</style>
</head>
<body>
<!--双飞翼结构-->
<!-- 头部 -->
<div class="header">
<div class="content">头部</div>
</div>
<!-- 主体 -->
<div class="container">
<div class="wrap">
<div class="main"> 主体 </div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
圣杯布局的方式实现三栏布局：
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<style type="text/css">
.header{
width: 100%;
height: 60px;
position: relative;
background-color: #eee;
}
.footer{
width: 100%;
height: 90px;
position: relative;
background-color: #eee;
clear: left;
}
.content{
width: 1000px;
min-height: 100%;
background-color: #aaa;
margin: auto;
text-align: center;
line-height: 50px;
}
.container{
width: 600px;
margin: auto;
background-color: yellow;
}
.container .main{
width: 100%;
min-height: 600px;
background-color: wheat;
float: left;
}
.container .left{
width: 200px;
min-height: 600px;
background-color: lightblue;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.container .right{
width: 200px;
min-height: 600px;
background-color: lightgreen;
float: left;
position: relative;
margin-left: -200px;
right: -200px;
}
</style>
</head>
<body>
<!--圣杯结构-->
<!-- 头部 -->
<div class="header">
<div class="content">头部</div>
</div>
<!-- 主体 -->
<div class="container">
<div class="main"> 主体 </div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
知识总结：
float 可以实现浮动，可以写成float:left; flat:right;
清楚浮动的常见方法是：在相邻元素上加上：clear:left clear:right 或 clear:both;
子元素浮动引起的腹肌容器的高度塌陷的解决方案：
在父元素上设置固定高度：height
在父元素上写上overflow:hidden;
给父级元素添加伪类解决 【最佳方案】
box1:after {
content:''; /*添加空元素*/
display:block;
clear:both;
}
加一个不浮动的固定高度的子元素（用于撑开容器）
用三种方式实现三栏布局
绝对定位：父元素设置固定宽度，并做相对定位，子元素固定宽度，设置绝对定位与父元素对齐。
双飞翼布局：通过添加父元素，并挤压margin，来居中中间主体，通过浮动和margin塌陷来调整两边栏位置。
圣杯布局：通过相邻元素的相对定位来实现三栏布局
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
