布局时需要利用浮动(float)的属性,同时我们需要一个清除浮动(clear)与之配合才能达到预期的目标。

w3s上关于float和clear的定义分别为:float:float 属性定义元素在哪个方向浮动。

clear:clear 属性设置一个元素的侧面是否允许其他的浮动元素。

一个简单的例子(代码什么的我就不贴出来了:)):

这是我们通过浮动然后清理浮动(clear:both)之后预期想要达到的效果。

如果不清理浮动会是怎样?只清理右边呢?只清理左边呢?

<!--没有清理浮动的效果--!>

<!--clear:right 右侧不允许浮动--!>

clear:left之后和我们预期的效果一样。为什么会产生这些不同的结果呢?又为什么文字在而颜色miss了呢?

经过查资料以及问朋友之后得到了想要的答案:

左边部分和右边部分浮动后就脱离了文档流,而尾部看到上面没人就自动跑到头部的下面去了(TAT),这就是我们没有清理浮动后看不到尾部黄色的原因。那又是为什么能看到尾部的字体呢?浮动只是类似于绝对定位而不完全相同于绝对定位会完全脱离文档流,会继续对文档流的内容产生影响,所以我们能看到文字描述。

其实我们只需要用一个opacity属性就能完全明白了。

没使用clear属性时在opacity:0.5的状态下如图:

(⊙o⊙)… 大概就是这样吧。

这是我第一次写博客!这是我第一次写博客!这是我第一次写博客!重要的事说三遍。ahaaaaaaa,内容很简单纯新手向。刚毕业土木狗任性辞职了,然后准备接触前端,听说要想学习好前端需要多看博客多写博客,所以我来了。争取养成写博客的习惯。

万一有人看到(会有人看到吗?)之后觉得需要吐槽的袭来吧,有错误的地方欢迎指正,欢迎老手指导,新人交流!

关于HTML中浮动与清除的思考的更多相关文章

  1. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  2. CSS浮动与清除浮动(overflow)例子

    在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧. float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...

  3. css中的浮动以及清除浮动

    对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...

  4. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  5. 详细解读css中的浮动以及清除浮动的方法

    对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...

  6. CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  7. CSS3中三种清除浮动(float)影响的方式

    float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决.但是凡是好用的,也容易出错.比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0 ...

  8. css通用小笔记02——浮动、清除(三个例子)

    css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果  2.多个div并排显示 3.清除浮动(默认显示) 一.文字环绕效果: h ...

  9. CSS布局--浮动与清除

    浮动和清除 浮动和清除是页面布局的重要属性.浮动的意思是指将元素从常规的文档流中取出来. 当你浮动一个元素的时候,浮动的元素会被浏览器尽量的往上放,能放多高就放多高,一直到某个元素的边界为止. 浮动元 ...

随机推荐

  1. Vagrant 快速入门

    1. Vagrant功能: Vagrant uses Oracle’s VirtualBox to build configurable, lightweight, and portable virt ...

  2. NHibernate分页

    转载:http://www.cnblogs.com/tenghoo/archive/2011/02/14/1954393.html NHibernate专题:http://kb.cnblogs.com ...

  3. Java程序内存分析:使用mat工具分析内存占用

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  4. Codefoces 429 D. Tricky Function

    裸的近期点对.... D. Tricky Function time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  5. linux 硬链接和软链接(转)

    1.Linux链接概念Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link)。默认情况下,ln命令产生硬链接。 【硬连接】硬连接指通过索引节点 ...

  6. js日期计算及快速获取周、月、季度起止日

    var now = new Date(); //当前日期 var nowDayOfWeek = (now.getDay() == 0) ? 7 : now.getDay() - 1; //今天是本周的 ...

  7. BZOJ 4318: OSU! 期望DP

    4318: OSU! 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4318 Description osu 是一款群众喜闻乐见的休闲软件 ...

  8. C语言排序算法

    (1)“冒泡法” 冒泡法大家都较熟悉.其原理为从a[0]开始,依次将其和后面的元素比较,若a[0]>a[i],则交换它们,一直比较到a[n].同理对a[1],a[2],...a[n-1]处理,即 ...

  9. [Express] Level 3: Reading from the URL

    City Search We want to create an endpoint that we can use to filter cities. Follow the tasks below t ...

  10. Php-SPL库中的迭代器类详解(转)

    SPL提供了多个迭代器类,分别提供了迭代访问.过滤数据.缓存结果.控制分页等功能.,因为php总是在不断壮大,我尽可能列出SPL中所有的迭代类.下面其中一些迭代器类是需要php5.4,另外一些如Sea ...