浮动布局

浮动布局

属性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>

推荐阅读更多精彩内容