前言：在我们写CSS样式的时候，float,position,display,overflow这几个关键字用得比较多。

弄清楚他们之间的原理，我们可以更高效的写出我们想要的布局。

作者：Ry-yuan

原文地址：http://www.cnblogs.com/Ry-yuan/p/6816290.html

一、float

1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置

2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘

3.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认）

4.浮动的影响：

    • 　　对附近的元素布局造成改变，使得布局混乱

    • 　　浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级元素，但我更倾向于说元素变成inline-block类型的元素，即同时拥有块级与行内元素的特征

    • 　　因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是当前元素A撑开的，但是当A元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌（前提是父容器高度小于A元素高度），下面用图来说明一下高度坍塌：

       

5.清除浮动与闭合浮动
　　　　先说说我个人的理解：我将解释一下我理解的闭合浮动与清除浮动
　　　　清除浮动：使用clear元素清除外面浮动，解决外面浮动对自己的影响
　　　　闭合浮动：当前块级中，其子元素使用了浮动，会给当前块内部和块外部的布局带来影响，所以将当前块中的浮动闭合，能将影响最大化清除。举个例子:

　　　　ex:

　　　　

<style type="text/css">

.box1{

        width: 200px;

        border: 2px solid #0f0;

        /*overflow: hidden;*/

    }

    .box1 .child-1{

        float: left;

        height: 100px;

        width: 100px;

        background: #fd0;

    }

    .box1 .child-2{

        float: left;

        height: 100px;

        width: 100px;

        background: #fba;

    }

    .box2{

        width: 200px;

        height: 150px;

        border: 2px solid #00f;

        /* clear: both; */

    }

</style>

<body>

    <div class="box1">

        <div class="child-1">child-1</div>

        <div class="child-2">child-2</div>

    </div>

    <div class="box2"></div>

</body>

图一：原始图

图二：child-1 和 child-2 进行浮动

图三:区分清除浮动与闭合浮动（个人理解：在外面解决问题，内部问题未解决）
清除浮动：对box2使用：clear：both

图四：闭合浮动（在内部解决问题：同时解决外部问题）
闭合浮动：对box1使用overflow：hidden（其中一种方式，后面还有更好的方式）
因此我更愿意称其为闭合浮动:其实也可以叫清除浮动，不过我就是觉得闭合浮动比较形象。
6.闭合浮动方法(常见的几个方法)：既然浮动带来这些不利的影响，我们就要想办法清除它。
其一：通过在浮动元素的末尾添加一个空元素，设置 clear：both属性；
缺点：成本太高，额外添加了一个元素，维护困难
<div class="box1">

<div class="child-1">child-1</div>

<div class="child-2">child-2</div>

<div style="clear: both;"></div>

</div>

<div class="box2"></div>
其二：通过设置父元素 overflow 或者display：table 属性来闭合浮动，给box1添加overflow：hidden
 
 
其三（推荐）：使用伪元素：after,下面是代码，给box1添加上clearfloat这class即可
/*适配ie6*/

.clearfloat{

zoom:;

}

.clearfloat:after{

display:block;

height:;

content:"";

clear:both;

visibility:hidden;

}

CSS float详解的更多相关文章

  1. 此博客使用的CSS样式详解！

    此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...

  2. CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  3. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  4. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

  5. 带你走进CSS定位详解

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...

  6. CSS浮动属性Float详解

    什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在 ...

  7. CSS中详解hight属性

    目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...

  8. 转：CSS圆角详解

    CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...

  9. CSS长度单位详解

    序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇 ...

随机推荐

  1. MapReduce示例式理解

    从word count这个实例理解MapReduce. MapReduce大体上分为六个步骤:input, split, map, shuffle, reduce, output.细节描述如下: 1. ...

  2. Python25之字典1

    一.字典的意义 字典不同于前述的序列类型,他是一种映射类型,它的引入就是为了简化定义索引值和元素值存在的特定关系的定义和访问问题 二,字典定义 字典变量名 = {key1 : value1, key2 ...

  3. Python程序设计基本方法图

    Python程序设计基本方法图

  4. [tomcat] 连接池参数maxActive、maxIdle 、maxWait 等

    maxActive 连接池支持的最大连接数,这里取值为20,表示同时最多有20个数据库连接.设 0 为没有限制.maxIdle 连接池中最多可空闲maxIdle个连接 ,这里取值为20,表示即使没有数 ...

  5. 静态成员函数和（CPP与C结构体的区别）

    #include <iostream> using namespace std.; //这种写法只是CPP中的struct的用法,但是在C中还是不支持的. //C中的结构体不支持写方法的. ...

  6. DEFAULT CURRENT_TIMESTAMP

    alter table t_user_channel_info change update_dttm update_dttm timestamp NOT NULL DEFAULT CURRENT_TI ...

  7. 路由基础(Routing)

    查看本机路由表: [root@controller02 ~]# cat /etc/iproute2/rt_tables # # reserved values # 255     local 254  ...

  8. OpenCvSharp 图像旋转

    /// <summary> /// 图像旋转 /// </summary> private Mat MatRotate(Mat src, float angle) { Mat ...

  9. iview的table组件中加入超链接组件，可编辑组件，选择组件，日期组件

    这篇文章主要介绍了iview的table组件中使用选择框,日期,可编辑表格,超链接等组件. 1.select选择组件 // tableColumn数组响应对象需要传入一个固定的option数组,如果该 ...

  10. 我们为什么要用redis

    Redis的5要点: 1.为什么要选择Redis:介绍Redis的使用场景与使用Redis的原因: 2.Redis常用命令总结:包括时间复杂度总结与具体数据类型在Redis内部使用的数据结构: 3.R ...