1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title></title>

  6     <style>

  7     .box1{

  8         width:100px;

  9         height:100px;

 10         background-color:yellow;

 11         float:left;

 12     }

 13     .box2{

 14         width:100px;

 15         height:100px;

 16         background-color:orange;

 17         /*clear:left;*/

 18         /*clear:right;*/

 19         clear:both;

 20     }

 21     .box3{

 22         width:200px;

 23         height:300px;

 24         background-color:#bfa;

 25         float:right;

 26     }

 27 /*

 28 如果我们不希望某个元素因为其他元素浮动的影响二改变位置，可以通过cle    ar属性来清除浮动元素对当前元素的所产生的影响

 29     clear:

 30         -作用：清除浮动元素对当前元素所产生的影响

 31         -可选值

 32             -left清除左侧元素对当前元素的影响

 33             -right清除右侧元素对当前元素的影响

 34             -both清除两侧影响中对该元素的位置影响最大的

 35         原理：

 36             设置清除浮动之后，浏览器会自动为元素添加一个上外边距，>    使其不受浮动元素的影响

 37  */

 38     </style>

 39 </head>

 40 <body>

 41     <div class="box1"></div>

 42     <div class="box2"></div>

 43     <div class="box3"></div>

 44 </body>

 45 </html>

~

~

CSS-clear属性的作用的更多相关文章

  1. 通俗讲解transform3D变换时css各属性的作用与搭配

    当没有浏览器兼容性限制时,就大胆地使用transiton的3D效果吧,前端也要做不一样的烟火! *常用的3D效果 rotateX/rotateY/rotateZ/rotate3dtranslateX/ ...

  2. CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)

    display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | ta ...

  3. CSS中float属性和clear属性的一些笔记

    在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...

  4. CSS中clear属性的both、left和right浅析

    前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮 ...

  5. CSS 清除浮动 clear 属性

    CSS 清除浮动 clear 属性用于设定元素哪一侧不允许有其他浮动元素(而并非取消元素的浮动). 可能的取值如下: 取值 说明 none 默认值,允许两侧都有浮动元素 left 左侧不允许有其他浮动 ...

  6. css之clear属性

    clear属性用来设置元素左右两边是否可以存在浮动元素. 它的值包括:left,right,both,none.其中none代表左右两边可以出现浮动元素.

  7. CSS的clear属性

    以下引用自w3school clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的.在 CS ...

  8. css z-index属性使用过程中遇到的问题

    z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...

  9. 【转】准确理解CSS clear:left/right的含义及实际用途

    零.说点什么 好久没更新了.并不是在折腾什么大作,而是广度学习与实践中,加上婚礼等诸多大事,所以产出较少. 今天这篇也只是小作,博客是自己很好的学习工具,只要我学习不止,博客也会不断更新的. 我们平时 ...

  10. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

随机推荐

  1. zsh terminal set infinity scroll height

    zsh terminal set infinity scroll height zsh Terminal 开启无限滚动 https://stackoverflow.com/questions/2761 ...

  2. Python Tutorials

    Python Tutorials Real Python https://realpython.com/ https://realpython.com/courses/ https://realpyt ...

  3. Base 64 & URL & blob & FileReader & createObjectURL

    Base 64 & URL & blob & FileReader & createObjectURL /** * let blob = item.getAsFile( ...

  4. H.265 & H.264

    H.265 & H.264 HEVC (H.265) vs. AVC (H.264) https://en.wikipedia.org/wiki/High_Efficiency_Video_C ...

  5. css & input type & search icon

    css & input type & search icon bug type="search" <input @input="autoSearch ...

  6. Union international INC：VR线下娱乐市场巨大

    联合国际公司认为众多企业追着VR的风口不断加码,导致VR在经历了一个爆炸式的发展,如今部分VR公司开始觉得日子不好过了,一个重要表现就是现金流紧张.VR如何能够普及,何时能够及早变现,成为业内关注的焦 ...

  7. NGK全网算力总量增加，SPC前景广阔

    日前,根据NGK官方公布的数据显示,NGK全网算力总量达到550.96万,比早前预估的500万算力增加了50.96万,并且随着SPC空投的持续,还有不少生态建设者在持续涌入NGK算力市场.那么,是什么 ...

  8. 大数据开发-linux下常见问题详解

    1.user ss is currently user by process 3234 问题原因:root --> ss --> root 栈递归一样 解决方式:exit 退出当前到ss再 ...

  9. 18_MySQL之HAVING字句的使用

    本节涉及的sql语句: -- HAVING -- 错误示例 SELECT deptno FROM t_emp WHERE AVG(sal)>=2000 GROUP BY deptno; 因为wh ...

  10. 生产者和消费者问题(synchronized、Lock)

    1.synchronized的生产者和消费者 synchronized是锁住对象 this.wait()释放了锁 并等待 this.notify()随机通知并唤醒同一个对象中的一个线程 this.no ...