浮动布局
2018-03-20 本文已影响14人
codeing小牛
属性float
参数值
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
float:inherit 继承自父元素
属性clear
clear:left 左侧不循序出现浮动元素
clear:right 右侧不允许出现浮动元素
clear:both 两侧均不可以出现浮动元素
clear:none 默认值允许浮动元素出现在两侧
clear:inherit 从父元素继承clear属性的值
传统布局块级元素无论大小是多少都会单独占用一行，使用浮动布局可以解决块级元素无法并列排列的问题
使用浮动实现简单的页面布局
效果图：
float.png
代码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<!-- float 该属性设定元素的浮动方位 -->
<!-- left right none inherit-->
<!-- clear 元素的某一侧不允许出现浮动元素 -->
<!-- left right both none inherit -->
<style type="text/css">
#header, #sideLeft, #sideRight, #footer {
border:solid 1px #666 ;
padding:10px ;
margin:6px ;
}
#header {
width:500px ;
}
#sideLeft {
float:left ;
width:60px;
height:100px ;
}
#sideRight {
float:left ;
width : 406px ;
height :100px ;
}
#footer {
clear:both ;
width:500px ;
height:60px ;
}
</style>
</head>
<body>
<div id="header">导航</div>
<div id="sideLeft">菜单</div>
<div id="sideRight">内容</div>
<div id="footer">底部</div>
</body>
</html>
