float 属性定义元素在哪个方向浮动。

浮动元素会生成一个块级框,而不论它本身是何种元素。

如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。

如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

clear 属性规定元素的哪一侧不允许其他浮动元素。

CSS 布局Float 【3】的更多相关文章

  1. CSS 布局Float 【0】

    float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...

  2. CSS 布局Float 【4】

    一些浮动模型的基本知识:浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框 或者另一个浮动元素的框的边缘.浮动元素不在文档的普通流中,文档的普通 ...

  3. CSS 布局Float 【2】

    1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. 1.2 浮动层 浮动层:给元素的float属性赋值后,就 ...

  4. 前端学习笔记--CSS布局--float定位

    1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...

  5. CSS 布局Float 【1】

    1.HTML元素分类 HTML元素大题可分为内联(inline)元素和块(block)元素. 1.1 内联元素(inline) ①元素显示方式:"文本方式",1个挨着1个,不独自占 ...

  6. CSS布局:Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  7. 转:CSS布局:Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  8. CSS布局 ——从display,position, float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  9. [浅谈CSS核心概念] CSS布局模型:float和position

    1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...

随机推荐

  1. Unity 小地图制作插件NJG MiniMap的简单使用

    unity版本:4.5.1 NJG MiniMap版本:1.5 参考链接:http://blog.csdn.net/wuming22222/article/details/37526659,作者:CS ...

  2. node.js基础模块http、网页分析工具cherrio实现爬虫

    node.js基础模块http.网页分析工具cherrio实现爬虫 一.前言      说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherri ...

  3. thinkphp中的session()方法

    系统提供了Session管理和操作的完善支持,全部操作可以通过一个内置的session函数完成. 用法 session($name, $value='') 参数 name(必须):如果传入数组 则表示 ...

  4. Apache HTTP Server mod_dav.c 拒绝服务漏洞(CVE-2013-1896)

    漏洞版本: Apache HTTP Server < 2.2.25 漏洞描述: CVE ID:CVE-2013-1896 Apache HTTP Server是一款流行的WEB服务器 Apach ...

  5. BZOJ1679: [Usaco2005 Jan]Moo Volume 牛的呼声

    1679: [Usaco2005 Jan]Moo Volume 牛的呼声 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 723  Solved: 346[ ...

  6. 【动态规划】Vijos P1121 马拦过河卒

    题目链接: https://vijos.org/p/1616 题目大意: 卒从(0,0)走到(n,m),只能向下或向右,不能被马一步碰到或走到马,有几种走法. 题目思路: [动态规划] 把马控制的地方 ...

  7. Spring与SpringMVC的容器关系分析

    Spring和SpringMVC作为Bean管理容器和MVC层的默认框架,已被众多WEB应用采用,而实际使用时,由于有了强大的注解功能,很多基于XML的配置方式已经被替代,但是在实际项目中,同时配置S ...

  8. [置顶] VC++界面编程之--使用分层窗口实现界面皮肤

    使用分层界面来实现界面皮肤的好处是:可以保证图片边缘处理不失真,且能用于异形窗口上,如一些不规则的窗口,你很难用SetWindowRgn来达到理想效果. 在很多情况下,界面的漂亮与否,取决于PS的制作 ...

  9. 网络编程之TCP异步群聊:客户端代码

    最近朋友建议我写一些关于微软云技术的博客留给学校下一届的学生们看,怕下一届的MSTC断档.于是我也觉的有这个必要.写了几篇博客之后,我觉得也有必要把这一年的学习内容放在博客做个纪念,就这样写了本篇博客 ...

  10. [转]机器学习&数据挖掘笔记_16(常见面试之机器学习算法思想简单梳理)

    机器学习&数据挖掘笔记_16(常见面试之机器学习算法思想简单梳理) 转自http://www.cnblogs.com/tornadomeet/p/3395593.html 前言: 找工作时(I ...