clear的理解

原创 2015年07月07日 11:51:36

之前对于clear,很少用。

以前对divfloat之后,影响了其他元素,所以我设计的所有web页面,第一定义就是float。这样所有页面的元素都是脱离文档流来定位的,虽然天下乌鸦一般黑,——但是总是感觉比较另类,不那么高级。


于是今天看到一个clear:这个只是会影响自己dom元素,不会影响其他元素。

增加clear之后,页面在渲染本dom的时候,按照文档流,进行位置判断,如果发现将要依附的元素有float属性,则避而远之,继续在判断下一个,一直找到最后一float,然后换一行,安顿下来。(clear:与 float  不共戴天,但clear弱势,不能左右别人,只能避而远之,但是又不会离太远,就是紧接着下一行

比如 :按照加载顺序,浏览器这样判断

div1 :脱离文档流按照左浮动

div2:发现div1并没有占用位置,就默认顶到了第一个——其实就藏到了div1的背后

div3:按照文档流,先判断2的位置,然后基于标准的文档流,然后在相对于2的位置,换一行进行float

div4:会找上一个元素,发现是div3,是一个带float,赶快躲开 于是紧接着div3安顿下来了。

<style type="text/css">
    #test div{
        border:1px solid #000;
        /*position: relative;*/
/*        top:5px;
        left:5px;*/
        /*float:left;*/
    }
</style>
<div style="width:1200px; border:1px solid #f60" id="test">
    <div style="width:200px;height:100px;border:1px solid blue;float:left">1</div>
    <div style="width:200px;height:150px;border:1px solid red;">2</div>
    <div style="width:200px;height:150px;border:1px solid green;float:left">3</div>
    <div style="width:300px;clear:left">clear</div>
</div>

类似于这种




还有一个例子

<style type="text/css">
    #test div{
        border:1px solid #000;
        /*position: relative;*/
/*        top:5px;
        left:5px;*/
        /*float:left;*/
    }
</style>
<div style="width:1200px; border:1px solid #f60" id="test">
    <div style="width:200px;height:200px;border:1px solid blue;float:left">1</div>
    <div style="width:200px;height:150px;border:1px solid red;;float:left">2</div>
    <div style="width:300px;clear:left">clear</div>
    <div style="width:200px;height:150px;border:1px solid green;">3</div>
</div>
效果:


参考这里:http://www.zhangxinxu.com/wordpress/2014/06/understand-css-clear-left-right-and-use/

解决CSS中float:left后需要clear:both清空的繁琐步骤

1.传统处理方式: 1 li {float:left;}/*这样,对固定宽度导航条来说,li不能自动居中*/     2.inline-block方式: ...
  • CherishLyf
  • CherishLyf
  • 2015年08月27日 19:47
  • 1697

Hibernate 中的session 的flush、reflush 和clear 方法 ,及数据库的隔离级别

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. flush 方法: 说白一点:如果session 中的某...
  • chuck_kui
  • chuck_kui
  • 2016年05月29日 12:04
  • 2344

详解 清除浮动 的多种方式(clearfix)

说明本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者!1.什么是浮动首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 1...
  • FE_dev
  • FE_dev
  • 2017年04月02日 22:16
  • 27465

正确理解 clear:both

要注意以下几点:  1、 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以)。  2、 浮动元素后边的非浮动元素显示问题。  ...
  • gooduler
  • gooduler
  • 2015年07月01日 06:58
  • 495

CSS 浮动 float 清除浮动 clear 最容易理解的文章

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边...
  • qq_29580525
  • qq_29580525
  • 2017年07月30日 16:23
  • 269

准确理解CSS clear:left/right的含义及实际用途 张鑫旭标记

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=4179 ...
  • sentimental_dog
  • sentimental_dog
  • 2016年08月09日 22:34
  • 258

理解float clear(转载滴)

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。       前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。      写在前面的话:...
  • qq_30092189
  • qq_30092189
  • 2017年07月28日 17:50
  • 75

你真的理解clear:both吗?

找了好久了原文地址:你真的理解clear:both吗?作者:莫文   在开发中,从美工MM给你Html代码中,肯定能经常看”div style="clear:both;">div>”这样的代码,但...
  • carlcarry
  • carlcarry
  • 2012年09月06日 09:58
  • 375

CSS中 clear.both 的理解

在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的...
  • skxlfmn
  • skxlfmn
  • 2011年02月14日 15:35
  • 295

Hibernate深入理解----03操作Session缓存方法(flush、refresh、clear,事务隔离级别)

参考代码下载github:https://github.com/changwensir/java-ee/tree/master/hibernate4     Session 接口是 Hibernat...
  • oChangWen
  • oChangWen
  • 2016年09月19日 10:54
  • 3208
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:clear的理解
举报原因:
原因补充:

(最多只允许输入30个字)