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

相关文章

来自专栏禹都一只猫博客

Go语言简介 — 特性

851
来自专栏PHP在线

jQuery学习笔记

jQuery大部分功能需要根据文档的DOM模型来工作,首先需要正确地解析到整个文档的DOM模型结构。使用jQuery需要在整个文档被浏览器完全加载后才开始进行。

902
来自专栏c#开发者

如何在DataGrid里面产生滚动条而不滚动题头

我们在开发的时候一定遇到,使用DataGrid的时候由于不想分页(数据没有那么多)但是又显示不在一页里面,此时我们希望在DataGrid里面出现一个滚动条,可以...

35311
来自专栏向治洪

android之surfaceview画图

在前文中,我们分析了应用程序窗口连接到WindowManagerService服务的过程。在这个过程中,WindowManagerService服务会为应用程序...

36710
来自专栏coder修行路

Go基础--终端操作和文件操作

终端操作 操作终端相关的文件句柄常量 os.Stdin:标准输入 os.Stdout:标准输出 os.Stderr:标准错误输出 关于终端操作的代码例子: pa...

2896
来自专栏老九学堂

【干货】20K以上的高薪Java必掌握的基础知识点(二)

怎么样!上一期的知识点小伙伴都掌握了多少呢?复习的同时有没有查漏补缺的巩固自己的基础知识呢?今天我们来复习Java基础知识第二期! 61、Math 类提供了许多...

3707
来自专栏向治洪

深入理解React Native页面构建渲染原理

前言 React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。 基本概念解释 React 是...

48010
来自专栏魂祭心

原 利用Appdomain动态加载程序集,

3598
来自专栏吴裕超

认识createDocumentFragment

今天在看vue源码解析时候发现一个api没有见过,一查是原生的,赶紧补漏。 DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的...

2637
来自专栏GIS讲堂

Arcgis for Js实现graphiclayer的空间查询(续)

上文中,实现了简单的针对graphiclayer的空间查询工作,在本节,将更加详细的介绍针对graphiclayer的空间查询。首先,空间查询的方式:提供多种类...

833

扫码关注云+社区