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. POJ 2288 Islands and Bridges（状压DP）题解

    题意:n个点,m有向边,w[i]表示i的价值,求价值最大的哈密顿图(只经过所有点一次).价值为:所有点的w之和,加上,每条边的价值 = w[i] * w[j],加上,如果连续的三个点相互连接的价值 = ...

  2. u-boot 移植 --->3、S5PV210启动序列

    通过三星官方的资料S5PV210_iROM_ApplicationNote_Preliminary_20091126.pdf,了解到S5PVS10这款芯片的复位过程启动序列.芯片在出厂时就在内部固化了 ...

  3. web cache & web storage all in one

    web cache & web storage all in one web cache in action web cache best practices web storage in a ...

  4. markdown & typora

    markdown & typora Markdown Editor Typora https://www.typora.io/ https://github.com/typora xgqfrm ...

  5. CSS3 & transition & animation

    CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...

  6. React-Native Tutorials

    React-Native Tutorials https://egghead.io/courses/react-native-fundamentals part free https://egghea ...

  7. vue常用方法封装-一键安装使用（赠送免费工具）

    相信大家在使用vue开发过程中一定遇到了各种方法的整理收集,每次遇到新的问题都需要找到合适的方法 这里我给大家封装了一些vue项目中常用到的方法合集,免费提供费大家 因此,jsoften横空出世,不为 ...

  8. 获取点击元素的id

    1.onclick="dianji(this.id)" 传入id到方法里function dianji(id){ //这个就是id}2. $(document).click(fun ...

  9. Python网络编程相关的库与爬虫基础

    PythonWeb编程 ①相关的库:urlib.urlib2.requests python中自带urlib和urlib2,他们主要使用函数如下: urllib: urlib.urlopen() ur ...

  10. SpringBoot(十一): Spring Boot集成Redis

    1.在 pom.xml 中配置相关的 jar 依赖: <!-- 加载 spring boot redis 包 --> <dependency> <groupId>o ...