可视化格式模型-clear特性

‘clear’特性

该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。’clear’特性不考虑它自身包含的浮动子元素和不处于同一个Block formatting context中的浮动元素。 对于插入框,该属性适用于插入框所属的最后的块框。 间隙(Clearance)以元素margin top上方空白的方式被引入。它用来把元素垂直(典型情况是向下)推过浮动框。它是一个值。

clear 特性值的作用

left/right/both:生成框的间隙,是指设置足够的(空白区),以使元素的顶边框边界(top border edge)放置到由源文档中较早元素生成的任何左浮动框/右浮动框/左右浮动框的底外边(bottom outer edge,即底margin边)之下。 none:对考虑到浮动后的框的位置没有约束。

简单点儿说,就是设置了clear的元素的 top border edge 要放在相关的浮动元素的 bottom margin edge 之下。注意这两种元素接触边界的区别。一个是borer,一个是margin。 一个直观的例子:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<div style="width:300px; height:100px; background-color:green; float:left; border:5px solid red;">

float

</div>

<div style="clear:left; width:300px; height:50px; background-color:green; border:5px solid yellow; margin-top:50px;">

clearance

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

设置了clear的元素的margin-top是50px,没起作用,为什么呢?注意,应该是设置了clear的元素的top border edge,不是margin edge。 如果想让它们之间有50px的间距,怎么办? 看修改过的代码:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<div style="width:300px; height:100px; background-color:green; float:left; border:5px solid red; margin-bottom:50px;">

float

</div>

<div style="clear:left; width:300px; height:50px; background-color:green; border:5px solid yellow;">

clearance

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

浮动元素上的 clear

为 clear 特性被赋予浮动元素时,它将导致浮动框定位规则的修正,另外一条限制被追加: 浮动框区的上外边界(top margin edge)必须低于前面所有左浮框的下外边界(在clear:left时),或者右浮框区(clear:right),或者两个框区(clear:both)。

例子:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<div id="Container" style="width:300px; height:100px; border:1px solid gold; ">

<div id="DIV1" style="float:right; width:150px; height: 50px; background-color:green; ">float:right;</div>

<div id="DIV2" style="float:left; width:100px; height: 50px; background-color:red; clear:right;">clear:right float:left;</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java与Android技术栈

用Kotlin的方式来处理网络异常

之前的文章 RxJava处理业务异常的几种方式 曾经介绍过 Retrofit 的异常可以有多种处理方式。

602
来自专栏程序员的酒和故事

跟Google学写代码--Chromium/base--stl_util源码学习及应用

Chromium是一个伟大的、庞大的开源工程,很多值得我们学习的地方。 今天与大家分享的就是Chromium下base中的stl_util,是对stl的补充,封...

3485
来自专栏后端之路

使用分页插件的后悔药(二)

背景 我们使用了pageHelper之后大部分的需求可以满足了 部分场景下不需要使用count等语句来做分页,只需要做sql查询 问题 小伙伴在使用了一段时间之...

2736
来自专栏技术博客

编写高质量代码改善C#程序的157个建议[4-9]

  本文首先亦同步到http://www.cnblogs.com/aehyok/p/3624579.html。本文主要来学习记录一下内容:

975
来自专栏积累沉淀

干货--Redis+Spring+Struts2实现网站计算器应用项目案例

有关redis的介绍我就不说了,可以参看我前几篇文章,redis快速入门 首先来看一下redis的应用场景 ? 下面是我这个项目的的运行的场景截图 ...

1976
来自专栏小灰灰

java redis 通用组建

前言 redis 是个干嘛的 ? 看官网:http://redis.io/ 一句话,这里redis当做缓存(或者本来就是), 利用java写一个jedis的读...

1987
来自专栏葬爱家族

Mvvm、RxJava、Retrofit 三剑合璧

说起现在Android流行的app架构,脱口而出MVP、MVVM,要问两者区别,张口就来,balabalabala。。但是公司所有项目用的都是MVP,从没正式用...

1442
来自专栏对角另一面

lodash源码分析之baseFindIndex中的运算符优先级

本文为读 lodash 源码的第十篇,后续文章会更新到这个仓库中,欢迎 star:pocket-lodash

1878
来自专栏学海无涯

Android开发之项目经验分享

在Android开发中,除了基本的理论知识,还需要将所学知识运用到真实的项目中,在项目中锻炼自己的分析问题、解决问题的能力,本文将总结一下本人项目中遇到的一些问...

2525
来自专栏对角另一面

lodash源码分析之baseFindIndex中的运算符优先级

我悟出权力本来就是不讲理的——蟑螂就是海米;也悟出要造反,内心必须强大到足以承受任何后果才行。 ——北岛《城门开》 本文为读 lodash 源码的第十篇,后...

26311

扫码关注云+社区