CSS除了能够改变字体、背景和所有其他属性,还能够完成基本布局任务。

div+css通过浮动和定位、盒子模型等技术应用,是最常用的布局方式。

定位的基本思想很简单,它允许定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素,另一个元素甚至浏览器窗口本身的位置。

另一方面,css1提出浮动。浮动不完全是定位,不过,他当然也不是正常流布局。

浮动

声明<img src ="b5.jpg" align="right">会导致一个图像浮动到右边,而允许其他内容(文本)“围绕”该图像。css允许浮动任何元素,从图像到段落再到列表,所有元素都可以浮动,使用属性float实现。

因此,上述代码还能写作<img src ="b5.jpg" style="float:left">。

浮动元素

对于浮动元素,有几点要记住。首先,会以某种方式将浮动元素从文档的正常流中删除,影响布局。一个元素浮动是,其他内容会“环绕”该元素。

注意,浮动元素周围的外边距不会合并。如果浮动一个有20像素外边距的图像,在这个图像将至少有20像素的空间。如果其他元素与此图像响铃,而且都有外边距,那么这些外边距不会与浮动图像的外边距合并。

如果确实要浮动一个非替换元素,则必须为该元素声明一个width,否则,浮动段落可能只有1个字符宽。

不浮动

除了left和right外,float属性还有一个值。float:none用于防止元素浮动。也许不会认为,如果让一个元素不浮动,就不声明float,实际上,要得到正常的非浮动元素,必须有这个值,不然所有元素都会以某种方式浮动。

浮动的详细内幕

深入讨论浮动的详细内容之前,首先要建立包含块的概念。浮动元素的包含块是最近的块级祖先元素。因此,在以下标记中,浮动元素的包含块就是包含该浮动的段落元素:

<h1>Test</h1>
<p><img src ="U54.jpg" style ="float:right;border:1px solid #000">
This is paragraph text,but you knew that. Whthin the content of this paragraph id an image that's been floated.The containing block for the floated image is the paragraph.
</p>

此外,浮动元素会生成一个块级框,而不论这个元素本身是什么,因此如果让一个链接浮动,即使该链接本身是行内元素,通常会生成一个行内框,但只要她是浮动的,就会生成一个块级框,规则:

1)浮动元素的左右边界不能超出其包含块的左右内边界。(虽然设置负边距或浮动元素比其父元素更宽,会让其出现在父元素的外面。)

2)浮动元素的左右外边界必须是源文档中之前出现的左浮动(或右浮动)元素的有(左)边界,除非后出现浮动元素的顶端在先出现的浮动元素的底端下面。

浮动内容都是可见的,不必担心一个浮动元素与另外一个浮动元素重叠。而使用定位情况会完全不同,可能会导致元素相互覆盖。

3)左浮动元素的右边界不会在其右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左浮动元素的右外边界的左边。

4)一个浮动元素的顶端不能比其父元素的顶端更高。如果一个浮动元素在两个合并外边距之间,放置这个浮动元素时就好像在两个元素之间有一个块级父元素。

这能防止浮动段落一直向上移动到三个段落共同的父元素顶端。

5)浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。

6)如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶部当不能比包含该元素所生成框的任何行框的顶端更高。

7)左(或右)浮动元素的左边(右边)有另一个浮动元素,前者的右外边界不能在其包含块的有(左)边界的右边(左边)。

8)浮动元素必须尽可能高低放置。

9)左浮动元素必须向左尽可能元,右浮动元素必须向右尽可能元,位置越高,就会向右或向左浮动得越远。

实用行为

在段落1中插入左浮动的图片:

这样看浮动元素超出了左元素的底端,但是不明显。前面讨论的浮动规则只处理乐路浮动元素和其父元素的左右和上边界,而没有涉及下边界。

css2.1澄清了浮动元素行为的一个方面:浮动元素会延伸,从而包含其所有后代浮动元素。

设置图片左边距10像素,同时添加Test标题的背景和边框:

由于浮动元素同时处于流内和流外,所以这种情况肯定会发生。标题的内容由浮动元素“显示”,不过标题元素的宽度还是和父元素相等。为了避免盖在浮动元素下面,具体内容并不从其内容区左边界开始显示。

清除

你可能并不总是希望内容流过浮动元素,某些情况下,可能要特意避免这种行为。在这种情况下,你希望将没小节第一个元素设置为禁止浮动元素出现在它旁边。如果第一个元素可能放在一个浮动旁边,则会向下推,直到出现子啊浮动元素的下面,而且所有后续内容都在其后面出现。

这可以利用clear属性完成。

给标题“Test”添加属性clear:left

类似于html中的<br clear = "left">防止h3元素左边有浮动元素,还会把h3推过所有左浮动元素,不过还允许浮动元素出现在h3右边。

css细节复习笔记——浮动的更多相关文章

  1. css细节复习笔记——基本视觉格式化

    css包含如此开放.如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数. 基本框 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素中心有一个 ...

  2. css细节复习笔记——结构与层叠

    每个合法的文档都会生成一个结构树,有了结构树元素的祖先.属性兄弟元素等等创建选择器来选择元素,这是CSS继承的核心.继承是从一个元素向后代元素传递属性值所采用的机制.面向一个元素使用哪些值时,用户代理 ...

  3. css细节复习笔记——内边距、边框和外边距

    一个元素的内边距.边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观. 高度和宽度 这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确 ...

  4. Css深入理解之浮动_慕课网课程笔记

    前言 这篇是在慕课网上跟着张鑫旭重走CSS之路的第三篇学习笔记了,主要是学习float属性,闲话少说,下面进入正文. float的历史 要想了解一个东西,我们还是需要从本质去了解它,那么我们就需要问一 ...

  5. angular复习笔记4-模板

    Angular复习笔记4-模板 简介 模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生成各种各样的网页.在Angular中,模板的默认语言是HTML,几乎所有的HTML语法在模板中都是 ...

  6. css 细节收集

    细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: <li>记住密码<img src="&qu ...

  7. css随堂笔记(三)

    Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 ...

  8. Angular复习笔记7-路由(下)

    Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...

  9. Angular复习笔记5-指令

    Angular复习笔记5-指令 在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...

随机推荐

  1. 温故而知新-面向对象的PHP

    1 类的多态 不同的类对同一操作可以有不同的行为. 比如自行车和汽车都有移动这个成员函数行为, 那么自行车类可以移动,行为和汽车的移动行为肯定不同. 2 析构函数不能有参数 3 __set和__get ...

  2. python 2.7中安装mysql

    在python中进行安装mysql模块,但是怎么都不能导入mysql模块,出错如下所示: [root@python ~]# python Python 2.7.11 (default, Apr 5 2 ...

  3. opencv_traincascade 训练自己的检测器

    2013年08月08日 ⁄ 综合 ⁄ 共 1061字 ⁄ 字号 小 中 大 ⁄ 评论关闭   经过近一个月的工程实战,把自己累积的经验分享给大家,教你如何训练一个收敛的,比opencv自带的data效 ...

  4. C++如何实现DNS域名解析<转>

    C++如何实现DNS域名解析 这片文章介绍了C++如何实现DNS域名解析,还有对相关技术的介绍,代码很详细,需要的朋友可以参考下   一.概述 现在来搞定DNS域名解析,其实这是前面一篇文章C++实现 ...

  5. 学习 TCP 三次握手和四次挥手

    TCP三次握手和四次挥手的问题在面试中是最为常见的考点之一.很多读者都知道三次和四次,但是如果问深入一点,他们往往都无法作出准确回答. 本篇尝试使用动画来对这个知识点进行讲解,期望读者们可以更加简单地 ...

  6. ArrayList原理(一)

    需要使用到动态数组的时候用的最多的就是ArrayList了,底层其实是Object数组,以下demo基于JDK1.8: List<Integer> list  = new ArrayLis ...

  7. javascript中defer的作用

    javascript中defer的作用 <script src="../CGI-bin/delscript.js" defer></script>中的def ...

  8. rdd去重

    a=[[1,2,3,2,3,4],[3,4,5,6,7,5,3,2]]b=sc.parallelize(a) d=b.flatMap(lambda x:x)  #铺平 ,形成一个rdd e=d.dis ...

  9. Kubernetes的UI界面Kubernetes Dashboard的搭建

    1.搭建准备 Kubernetes集群的安装部署 2.搭建过程 2.1.在master节点上创建kubernetes-dashboard.yaml cd /etc/kubernetes vim kub ...

  10. codeforces:Michael and Charging Stations分析和实现

    题目大意 迈克尔接下来n天里分别需要支付C[1], C[2], ... , C[n]费用,但是每次支付费用可以选择使用优惠或不使用优惠,每次使用价值X的优惠那么迈克尔所能使用的优惠余量将减少X并且当天 ...