css_float

[253867843]

Float浮动

2-1.普通流介绍

• css定位机制包括: 普通流(标准流) 浮动 绝对定位
• 普通流:

默认状态: 元素自动从左往右, 从上往下排列

2-2.浮动的基础知识

• 浮动会使元素向左或向右移动, 只能左右, 不能上下
• 浮动元素碰到包含框或另一个浮动框, 浮动停止
• 浮动元素之后的元素将围绕它, 之前的不受影响
• 浮动元素会脱离标准流

浮动的基本语法:
    float: left; --- 左浮动
    float: right; --- 右浮动
    float: inherit; --- 继承父元素的浮动属性
    float: none; --- 不使用浮动

2-3.使用浮动后产生的问题

• 高度塌陷

2-4.清除浮动(作用于自身)

• clear: none | left | right | both;

设置了float的元素对其他相邻元素造成影响, 需要使用clear清除浮动, 
clear只会影响自身, 不会对其他相邻元素造成影响

• 给设置浮动的元素清除浮动, 不能解决父容器高度塌陷的问题

.box01 {
    width: 100px;
    height: 100px;
    background-color: red;
    color: green;
    float: left;
    clear: both;
}

2-5.清除浮动(解决父容器高度塌陷)

• 方法一: 在浮动元素后使用一个空元素

<div class="container">
    <div class="box01">11111</div>
    <div class="box02">22222</div>
    <div class="box03">33333</div>
    <div class='clear'></div>
</div>

.clear {
    clear: both; // 元素本身没有设置浮动
}

• 方法二: 给浮动元素的父容器添加overflow: hidden;

zoom: 1; /*触发hasLayout兼容IE6、7*/

<div class="container">
    <div class="box01">11111</div>
    <div class="box02">22222</div>
    <div class="box03">33333</div>
    <div class='clear'></div>
</div>

.container {
    ...
    overflow: hidden;
    zoom: 1;
}

• 方法三: 使用CSS3的:after伪元素

在浮动元素后, 添加了一个看不见的盒子
<div class="container clearfix">
    <div class="box01">11111</div>
    <div class="box02">22222</div>
    <div class="box03">33333</div>
</div>

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    zoom: 1;
}

.clearfix {
    zoom: 1;
}

3-1.课程总结

• 浮动会使元素左右移动
• 浮动会使元素脱离普通流
• 元素浮动后具备inline-block(行内块元素)属性
• 清除浮动方法推荐

1.使用css3 :after 伪元素清除浮动
2.overflow: hidden 清除浮动

块元素特性总结:

• 独占一行
• 块元素可以设置宽/高
• 块元素不设置宽度, 宽度默认为容器的100%
• 常用的块元素

p, div, h1~h6, ol, ul, li, dl, dt, dd, form, hr

行内元素特性总结:

• 与其他元素同行显示
• 行内元素不可以设置宽/高
• 行内元素的宽/高就是文字或图片的宽/高
• 常用的行内元素

span, a, em, sup, sub, input, img, textarea

清除浮动的误区

• 清除浮动分为:
  (1) 2-10.清除浮动元素(自身)的浮动, 它不能解决父容器高度塌陷的问题.
  (2) 2-11.清除浮动, 能够解决父容器高度塌陷的问题.