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 ...
随机推荐
- Leetcode（22）-括号生成
给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", "(()())& ...
- Dyno-queues 分布式延迟队列 之 基本功能
Dyno-queues 分布式延迟队列 之 基本功能 目录 Dyno-queues 分布式延迟队列 之 基本功能 0x00 摘要 0x01 Dyno-queues分布式延迟队列 1.1 设计目标 1. ...
- vue watch All In One
vue watch All In One var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: ...
- js sort map by key
js sort map by key Map map to array // Array.from() Object let obj = {}; for(let key of Object.keys( ...
- codesign wants to access key 密码是什么
codesign wants to access key 密码是什么 真正的是开机密码,不是 apple id 密码 https://developer.apple.com/forums/thread ...
- Android Studio & zh-Hans
Android Studio & zh-Hans https://developer.android.com/studio?hl=zh-cn https://developer.android ...
- react-parent-child-lifecycle-order
react-parent-child-lifecycle-order react parent child lifecycle order live demo https://33qrr.csb.ap ...
- js currying & js 科里化
js currying & js 科里化 var test = ( function (a){ console.log(`a2 =`, a);// 1 // console.log(`b2 = ...
- SVG namespace & preview bug
SVG namespace & preview bug error This XML file does not appear to have any style information as ...
- py conda 换源
安装软件 $ conda install wxpython 如果出现http错误,安装OpenSSL $ conda config --add channels https://mirrors.tun ...