CSS-clear属性的作用
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属性的作用的更多相关文章
- 通俗讲解transform3D变换时css各属性的作用与搭配
当没有浏览器兼容性限制时,就大胆地使用transiton的3D效果吧,前端也要做不一样的烟火! *常用的3D效果 rotateX/rotateY/rotateZ/rotate3dtranslateX/ ...
- CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)
display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | ta ...
- CSS中float属性和clear属性的一些笔记
在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...
- CSS中clear属性的both、left和right浅析
前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮 ...
- CSS 清除浮动 clear 属性
CSS 清除浮动 clear 属性用于设定元素哪一侧不允许有其他浮动元素(而并非取消元素的浮动). 可能的取值如下: 取值 说明 none 默认值,允许两侧都有浮动元素 left 左侧不允许有其他浮动 ...
- css之clear属性
clear属性用来设置元素左右两边是否可以存在浮动元素. 它的值包括:left,right,both,none.其中none代表左右两边可以出现浮动元素.
- CSS的clear属性
以下引用自w3school clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的.在 CS ...
- css z-index属性使用过程中遇到的问题
z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...
- 【转】准确理解CSS clear:left/right的含义及实际用途
零.说点什么 好久没更新了.并不是在折腾什么大作,而是广度学习与实践中,加上婚礼等诸多大事,所以产出较少. 今天这篇也只是小作,博客是自己很好的学习工具,只要我学习不止,博客也会不断更新的. 我们平时 ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
随机推荐
- Keras模型拼装
在训练较大网络时, 往往想加载预训练的模型, 但若想在网络结构上做些添补, 可能出现问题一二... 一下是添补的几种情形, 此处以单输出回归任务为例: # 添在末尾: base_model = Inc ...
- uni-app in action
uni-app in action uni-app 实战 $ npm run dev:%PLATFORM% $ npm run build:%PLATFORM% app-plus app平台生成打包资 ...
- free HTTPS for website! & SSL & TLS & HTTP/2 & SPDY
HTTPS for website! 1 1 1 # OK (bugs === main domain temporarily OK) # sub domain allways OK! # partl ...
- prototype chain & prototype & __proto__
prototype chain & prototype & proto prototype chain MDN https://developer.mozilla.org/en-US/ ...
- PM2 All In One
PM2 All In One https://pm2.keymetrics.io/ https://pm2.io/ $ yarn global add pm2 # OR $ npm install p ...
- js function arguments types
js function arguments types https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functi ...
- 使用stress进行压力测试
本文转载自使用stress进行压力测试 导语 stress,顾名思义是一款压力测试工具.你可以用它来对系统CPU,内存,以及磁盘IO生成负载. 安装stress 几乎所有主流的linux发行版的软件仓 ...
- JUnit5学习之四：按条件执行
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- VUE实现富文本编辑以及组件传值的使用总结
VUE实现使用富文本编辑,如下图: 实现这个富文本编辑需要以下步骤: 第一步:安装编辑器组件 npm install vue-quill-editor –-save第二步:创建一个Ue.vue的文件, ...
- CentOS7安装ZooKeeper3.4.14
1:下载安装包 wget https://downloads.apache.org/zookeeper/zookeeper-3.4.14/zookeeper-3.4.14.tar.gz 点击进入官网下 ...