可视化格式模型-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 条评论
登录 后参与评论

相关文章

来自专栏数据结构与算法

P1801 黑匣子_NOI导刊2010提高(06)

题目描述 Black Box是一种原始的数据库。它可以储存一个整数数组,还有一个特别的变量i。最开始的时候Black Box是空的.而i等于0。这个Black ...

3146
来自专栏柠檬先生

css3弹性盒子模型——回顾。

1.box-flex属性规定框的子元素是否可伸缩其尺寸。 父元素必须要声明display:box;子元素才可以用box-flex。     语法:box-...

1848
来自专栏海天一树

小朋友学Java(11):枚举

在C/C++/Java中,数据类型可以分为两大类。 一类是基本类型,比如int, long, float, double, char, String等 另一类是...

2536
来自专栏杨熹的专栏

Pandas常用命令-1

初期的时候,可能会先从实例入手,而不是先把所有先备命令学一遍,但下面这几个命令还是经常用的,如果被很长的tutorial吓跑,可以先敲一遍这些命令。 impor...

3416
来自专栏GreenLeaves

Oracle计算时间差函数

1、months_between(date1,date2)  返回两个日期之间的月份的差值 (1)、如果两个日期月份内天数相同,或者都是某个月的最后一天,返回一...

1656
来自专栏Android知识点总结

来谈谈Java的深浅拷贝吧

834
来自专栏数据结构与算法

洛谷P2870 [USACO07DEC]最佳牛线,黄金Best Cow Line, Gold

题目描述 FJ is about to take his N (1 ≤ N ≤ 30,000) cows to the annual"Farmer of the...

2455
来自专栏程序生活

Leetcode-Easy 412. Fizz Buzz

728. Self Dividing Numbers 描述: 给定一个整数n,判断1-n之间的数字,输出字符串。如果一个数是3的倍数,输出“FIzz”;如果...

3134
来自专栏数据结构与算法

P1983 车站分级

题目描述 一条单向的铁路线上,依次有编号为 1, 2, …, n 的 n 个火车站。每个火车站都有一个级别,最低为 1 级。现有若干趟车次在这条线路上行驶,每一...

3279
来自专栏逆向技术

逆向课程第四讲逆向中的优化方式,除法原理,以及除法优化上

           逆向课程第四讲逆向中的优化方式,除法原理,以及除法优化上 除法原理,涉及到了数学公式,而且在汇编中的体现形式也有10几种 这里首先讲解前4...

2088

扫码关注云+社区