html css中float浮动详解

特性

• 普通流(标准流)
  • 默认配置，元素自动从左往右，从上往下排列。
  • 块元素
    • 独占一行
    • 可以设置宽高。宽度默认为容器的100%
  • 行内元素
    • 与其他元素同行显示
    • 不可设置宽高，宽高就是文字或图片的宽高
• float浮动
  • 浮动元素向左或向右移动，不可上下
  • 浮动元素具备inline-block(行内块元素)属性
  • 浮动元素碰到包含框或另一个浮动框，浮动停止
  • 浮动元素之后的元素将围绕它，之前的不受影响
  • 浮动元素会脱离标准流，出现“高度坍塌”

/* 浮动的基本语法 */
float: none left right;

/* 清除浮动（闭合浮动） */
clear: none left right both;

清除浮动常用方法：

/* 方法一：在浮动元素后使用一个空元素 */
<div class="clear"></div>

/* (推荐)方法二：给浮动元素的容器添加 overflow:hidden; */

/* (推荐)方法三：使用CSS3的:after伪元素 */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

/* 方法四：父元素定义height。只适合高度固定布局 */

案例：圣杯布局

<!-- 头部 -->
<div class="header">
    <h4>头部部分</h4>
</div>
<!-- 主体 -->
<div class="container">
    <div class="middle">
        <h4>主体中间部分</h4>
    </div>
    <div class="left">
        <h4>主体左边部分</h4>
    </div>
    <div class="right">
        <h4>主体右边部分</h4>
    </div>
</div>
<!-- 底部部分 -->
<div class="footer">
    <h4>底部部分</h4>
</div>

* { margin: 0; padding: 0; }
body { min-width: 700px; }

/* 头部和底部公用样式 */
.header, .footer {
    background: #ff9999;
    text-align: center;
    height: 50px;
    line-height: 50px;
}

/* 中间、左侧、右侧的共用样式 */
.left, .middle, .right {
    position: relative;
    float: left;
    min-height: 130px;
    line-height: 130px;
    text-align: center;
}

/* 主体部分的样式 */
.container {
    padding: 0 220px;
    overflow: hidden;
}

/* 主体左侧的样式 */
.left {
    margin-left: -100%; /* margin-left向右移动父元素宽度100%，相当于元素向左移动100%宽度 */
    left: -220px;
    width: 220px;
    background: #99ffff;
}

/* 主体右侧的样式 */
.right {
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background: #ccff99;
}

/* 主体中间的样式 */
.middle {
    width: 100%;
    background: #ccffff;
    word-break: break-all;
}

/* 底部样式 */
.footer { clear: both; }

案例：双飞翼布局(三栏布局)

<!-- 头部 -->
<div class="header">
    <h4>头部页面</h4>
</div>
<!-- 主体 -->
<div class="main">
    <div class="main-inner">
        <h4>主体部分</h4>
    </div>
</div>
<!-- 左侧 -->
<div class="left">
    <h4>左侧</h4>
</div>
<!-- 右侧 -->
<div class="right">
    <h4>右侧</h4>
</div>
<!-- 底部 -->
<div class="footer">
    <h4>底部页面</h4>
</div>

 * { margin: 0; padding: 0; }
body { min-width: 700px; }

.header, .footer {
    border: 1px solid #333;
    background: #ff9999;
    text-align: center;
    height: 50px;
    line-height: 50px;
}

.left, .main, .right {
    float: left;
    min-height: 130px;
    line-height: 130px;
    text-align: center;
}

.main {
    width: 100%
}

.left {
    width: 200px;
    background: #99ffff;
    margin-left: -100%;
}

.right {
    width: 220px;
    background: #ccffff;
    margin-left: -220px;
}

.main-inner {
    margin-left: 200px;
    margin-right: 220px;
    min-height: 130px;
    background: #ccff99;
    word-break: break-all;
}

.footer { clear: both; }