html div浮动效果,【html】【6】div浮动float

我想 当看完上面的必看链接，拥有一定的基础后也得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 示例

2.3-float属性

#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;

}

div-a

div-b

div-c

div-d

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属性。浏览器宽度缩小时，也不会发生变形。

推荐多看看top必看的链接

伟大的塌陷

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

DIV CSS float浮动

一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:

标签盒子. ..等html标签)的浮动布局. #通过定义浮动(floa ...

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

 1111111

222222

div的浮动(float)

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

CSS清除浮动float方法总结

使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下

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

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

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

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

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

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

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

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

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

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

随机推荐

2016 Multi-University Training Contest 3

5/11 2016 Multi-University Training Contest 3官方题解 2016年多校训练第三场 老年选手历险记 暴力 A Sqrt Bo(CYD) 题意:问进行多少次开根 ...

openjudge6047分蛋糕[DP]

描述 有一块矩形大蛋糕,长和宽分别是整数w .h.现要将其切成m块小蛋糕,每个小蛋糕都必须是矩形.且长和宽均为整数.切蛋糕时,每次切一块蛋糕,将其分成两个矩形蛋糕.请计算:最后得到的m块小蛋糕中,最大 ...

sql server 创建只读帐号

有时候为了方便查询一下数据,会创建个只读帐号,以免误写sql语句改了数据 步骤:用sa帐号连接后,安全性--登录名--新建 输入要新建的帐号密码,在服务器角色里面单勾一个public 在 用户映射里面 ...

express－1 从Node开始

hello world var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, { ...

bash: sqlplus: command not found 解决方法

在oracle用户下输入:sqlplus 抛出bash: sqlplus: command not found 解决办法: 在root用户下输入如下命令: ln -s $ORACLE_HOME/bin ...

C++ Primer 学习笔记_44_STL实践与分析(18)--再谈迭代器【下】

STL实践与分析 --再谈迭代器[下] 三.反向迭代器[续:习题] //P355 习题11.19 int main() { vector iVec; for (vector&lt ...

初识Java，猜字游戏

import java.util.*; public class caizi{ public static void main(String[] args){ Scanner in=new Scann ...

excel数据处理，公式

1. 替换 SUBSTITUTE(字符串, 原字符串, 新字符串) =SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(L2,"镇",""),& ...

FragmentStatePagerAdapter和FragmentPagerAdapter区别

FragmentPageAdapter和FragmentStatePagerAdapter 我们简要的来分析下这两个Adapter的区别: FragmentPageAdapter:和PagerAdap ...

开源的PaaS平台