本篇主要介绍float属性：定义元素朝哪个方向浮动。

目录

1. 页面布局方式：介绍文档流、浮动层以及float属性。

2. float:left ：介绍float为 left 时的布局方式。

3. float:right ：介绍float为 right 时的布局方式。

4. 相邻元素含有float属性：介绍相邻元素含有float属性时的布局方式。

1. 页面布局方式

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

1.1 文档流

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

1.2 浮动层

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

记住：block元素会占有整整一行这件事情。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

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

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属性最前面的元素，排在最左面。

Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，

inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。

当多个浮动元素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属性介绍

　　　　

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

关于block和inline元素的float的更多相关文章

  1. display:inline-block，block，inline元素的区别

    1.display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始.2.display : inline将元素显示为行内元素,高度,行高以 ...

  2. display:inline-block，block，inline的区别与用法

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  3. 页面布局排版-block，inline，float，relative，absolute等

    1.span和div的区别 div是块元素(block),span是行内元素(inline): span什么事也不会做,它存在的目的在与为开发者给它所围绕的元素指定样式.div类似,不过它引入了行分隔 ...

  4. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  5. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  6. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  7. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

  8. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  9. block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素

    block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...

随机推荐

  1. 20145301《Java程序设计》实验报告一：Java开发环境的熟悉

    20145301<Java程序设计>实验报告一:Java开发环境的熟悉 课程:Java程序设计 实验名称:Java开发环境的熟悉 实验目的与要求: 1.没有Linux基础的同学建议先学习& ...

  2. 记一次redis key丢失的问题排查

    最近测试环境的redis经常性发生某些key丢失的问题,最终的找到的问题让人大吃一惊. 复盘一下步骤: 1.发现问题 不知道从某天开始,后台经常报错,原因是某些key丢失,一开始不在意,以为是小bug ...

  3. Java ArrayList在foreach中remove的问题分析

    目录 iterator itr.hasNext 和 itr.next 实现 倒数第二个元素的特殊 如何避坑 都说ArrayList在用foreach循环的时候,不能add元素,也不能remove元素, ...

  4. Spring Boot 上传图片文件

    步骤一:基于前面springboot入门小demo 基于的springboot入门小demo,已包含了前面文章的知识点(比如:热部署.全局异常处理器). 步骤二:创建uploadPage.jsp上传页 ...

  5. MongoDB 副本集和C#交互，简单测试

    MongoDB 副本集和C#交互,简单测试 primary节点宕机: 模拟primary节点宕机的情况,这时查看监控: 可以看到37018已经成了primary节点.主界面宕机导致了整个集群发生一次e ...

  6. spark SQL学习（综合案例-日志分析）

    日志分析 scala> import org.apache.spark.sql.types._ scala> import org.apache.spark.sql.Row scala&g ...

  7. 解题报告：hdu1008 Elvator

    2017-09-07 19:30:22 writer:pprp 比较顺利,最近生活出现了各种问题, 发生了很多矛盾,我要耐下心来,最重要的不是努力不努力,而是选择 希望我能处理好人际关系还有学业上的压 ...

  8. Python学习札记(九) Basic6 dict and set

    参考:dict and set Note: A.dict Hint:注意最后三点. 1.Python内置字典dict,全称directory,在别的语言如C++中称为map,使用键值-value存储, ...

  9. 纯js提交get和post请求

    get function get(URL, PARAMS) { var temp = document.createElement("form"); temp.method = & ...

  10. 锁（1）-- java锁

    前言: 锁分3种:java锁.分布式锁.DB锁 在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类.介绍的内容如下: 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁 ...