专栏首页练小习的专栏可视化格式模型-clear特性

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

相关文章

  • 百度百科的一个小效果

    百度百科的一个小效果,感觉不错,取下来保存 方法就是普通的onMouseOve事件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM...

    练小习
  • css单边投影与双侧投影

    早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了...

    练小习
  • css制作表单

    对于表单,很常用。但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过。我现在要介绍一个用< fie...

    练小习
  • 百度百科的一个小效果

    百度百科的一个小效果,感觉不错,取下来保存 方法就是普通的onMouseOve事件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM...

    练小习
  • 从项目中学习HTML+CSS

    最近由于工作原因以及自己的懈怠,已经很久都没有更新过博客了。通过这段时间,我发现坚持一件事情是真的很难,都说万事开头难,但是在放弃这件事上好像开头了后面就顺理成...

    Masimaro
  • 响应式绿色环保网页

    王凡汎
  • JavaScript事件(二)

    例题顺序: 1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果 1.子菜单下拉 1 <!DOCTYPE html...

    二十三年蝉
  • 用CSS3绘制iPhone手机

    本博客所有文章如无特别注明均为原创。作者:阿珏 ,复制或转载请以超链接形式注明转自 阿珏博客 。 原文地址《用CSS3绘制iPhone手机》

    阿珏
  • 基于JQuery实现电梯导航特效

    越陌度阡
  • 【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第七节)

    剽悍一小兔

扫码关注云+社区

领取腾讯云代金券