我想 当看完上面的必看链接，拥有一定的基础后也得7天左右，

记住 一定要看完，知道它都有什么，没学会不要紧，哪怕只是有个简单的概念也行，

随着后续的使用慢慢深入学习，现在开始div布局。

必看参考：

http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html

http://paranimage.com/css-float-attribute/

http://www.kwstu.com/ArticleView/divcss_201442291125960

简单例子：

1. 页面布局方式

页面布局方式，主要包含：文档流、浮动层、float属性。

1.1 文档流

HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。

1.2 浮动层

浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。

而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。

1.3 float 属性介绍

　　① left ：元素向左浮动。

　　② right ：元素向右浮动。

　　③ none ：默认值。

　　④ inherit ：从父元素继承float属性。

1.4 示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>2.3-float属性</title>

    <style type="text/css">

        #a

        {

            background-color:Red;  //红

            height:50px;

            width:100px;

        }

        #b

        {

            background-color:Yellow;     //黄

            height:50px;

            width:200px;

        }

        #c

        {

            background-color:Blue;   //蓝

            height:50px;

            width:300px;

         }

         #d

         {

            background-color:Gray;   //、灰

            height:50px;

            width:400px;

         }

    </style>

</head>

<body>

<div id=a >div-a</div>

<div id=b>div-b</div>

<div id=c>div-c</div>

<input type="text" value="input1"  />

<input type="text" value="input2" />

<input type="text" value="input3 " />

<div id=d>div-d</div>

<input type="text" value="input4 " />

</body>

</html>

2. float:left

说明：元素向左浮动。

2.1 代码变更

input2 添加：float:left

div-b 添加：float:left

div-d 添加：float:left

2.2 变更后视图

　　① 浏览器的宽度“不够长”时

　　　　

　　② 浏览器的宽度"够长"时

　　　　

2.3 结论

当前元素分类(float:left) 下一个紧邻元素分类(不含float) 结论
块级元素(a) 块级元素(b) b会填充a遗留下来的空间，a会和b发生重叠，a的图层在上面。
内联元素(b) b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。
内联元素(a) 块级元素(b) b不会跟随a的移动。
内联元素(b) b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。

3. float:right

说明：元素向右浮动。

3.1 代码变更

input2元素：添加 float:right

div-b 添加：float:right

div-d 添加：float:right

3.2 变更后视图

　　① 浏览器的宽度“不够长”时

　　

　　② 浏览器的宽度"够长"时

　　

3.3 结论

当前元素分类(float:right) 下一个紧邻元素分类(不包含float) 结论
块级元素(a) 块级元素(b) b会填充a遗留下来的空间，若a会和b发生重叠(父容器宽度减少)，a的图层在上面。
内联元素(b) b会填充a遗留下来的空间。
内联元素(a) 块级元素(b) b不会跟随a的移动。
内联元素(b) b会填充a遗留下来的空间。

4. 相邻元素含有float属性

因内联元素的特性，最好别把内联元素与块级元素相邻使用float属性。

下面都以块级元素为例：

默认视图：

4.1 float:left

　　　　给这三个div都添加 float:left

4.1.1 视图

　　　　①浏览器的宽度"足够长"

　　　　

　　　　②浏览器的宽度"不够长"

　　　　

4.1.2 结论

　　　　Ⅰ 相邻的浮动元素，left属性最前面的元素，排在最左面。

　　　　Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。

4.2 float:right

　　　　给这三个div都添加 float:right

4.2.1 视图

　　　　①浏览器的宽度"足够长"

　　　　

　　　　②浏览器的宽度"不够长"

　　　　

4.2.2 结论

　　　　Ⅰ 相邻的浮动元素，right属性最前面的元素，排在最右面。

　　　　Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。

4.3 height高度不等的块级元素

把div-a的height值设为大于div-b，三个div都添加 float:left后：

4.3.1 视图

　　　　①浏览器的宽度"足够长"

　　　　

　　　　②浏览器宽度缩小时

　　　　

　　　　③浏览器宽度进一步缩小时

　　　　

4.3.2 结论

　　　　Ⅰ height不相等的div浮动元素排序时，照拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。

4.3.3 解决浏览器宽度缩小变形

　　　　把添加float的属性的div元素嵌入在一个div中，并给此div添加width和height属性。浏览器宽度缩小时，也不会发生变形。

　　　　可参照 CSS HTML元素布局及Display属性介绍

　　　　

推荐多看看top必看的链接

伟大的塌陷

使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素，那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问题。

【html】【6】div浮动float的更多相关文章

  1. DIV CSS float浮动

    一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...

  2. DIV设置浮动float以后下一个DIV要换行的方法

    <div style=“float:left;”> 1111111 </div> <div style=“float:left;”>222222 </div& ...

  3. div的浮动(float)

    什么是浮动 浮动,故名思议,就是移动位置. 之所以不叫移动,而叫浮动,那是因为给元素设置浮动后,元素会浮到文档上面来,术语叫脱离文档流. 例子 下面我们看例子 <html> <hea ...

  4. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  5. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

  6. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  7. 经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  8. 经验分享：CSS浮动(float,clear)通俗讲解(转载)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  9. 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

随机推荐

  1. HDOJ -- 4699

    Editor Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Su ...

  2. HDU-1253 胜利大逃亡 （BFS）

    此题可以做为三维深搜模板题.. 胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  3. 理解C++11正则表达式（2）

    今天有幸(2016/3/19)在上海参加了C++交流会,见到了梦寐已久想见的台湾C++大神老师侯捷,心情十分的激动.侯老师对C++理解的深刻,让人叹为观止.以为他教学的严谨,说话方式娓娓道来,听着非常 ...

  4. JavaScript高级程序设计60.pdf

    错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...

  5. 机器学习笔记1——Introduction

    Introduction What is Machine Learning? Two definitions of Machine Learning are offered. Arthur Samue ...

  6. Log接口的重新封装

    闲来没事,看见当前的项目的日志形式有点冗余,每个类都需要声明确实有点繁琐, 因此重新将logback重新封装一下,供整个工程共享使用,版本是1.0.9. 代码如下: import java.lang. ...

  7. ReactiveCocoa框架学习2

    昨天内容回顾 信号类:表示有数据产生,信号类不发送数据 注意:不同的信号,订阅方式不同 RACSignal 创建RACDynamicSignal信号 -> didSubscribe(block) ...

  8. 5种Web常见编码、变换算法的自动识别

    #coding=utf-8 #识别字符序列变换算法,当前支持标准的MD5.SHA-1.Base64,及主流的URL编码.HTML编码 import re import sys #MD5判断函数 def ...

  9. GUI(图形用户界面)

    一.GUI(图形用户界面) GUI Graphical User Interface(图形用户接口) 用图形的方式,来显示计算机操作的界面,这样更方便更直观 CLI Command line User ...

  10. java synchronized与volatile的区别

    java线程同步有两个特性,一个是可见性,一个是有序性.在解释这两个概念之前,先说下两个重要的概念,主内存(main memory)和工作内存(working memory),线 程之间数据的交互不是 ...