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. C++中关于输入cin的一些总结

    (1)cin 在理解cin功能时,不得不提标准输入缓冲区.当我们从键盘输入字符串的时候需要敲一下回车键才能够将这个字符串送入到缓冲区中,那么敲入的这个回车键(\r)会被转换为一个换行符\n,这个换行符 ...

  2. Python求二维数组中某列的最大值

    主要运用np.amax() import numpy as np help(np.amax) a = np.arange(9).reshape((3, 3)) max_all = np.amax(a) ...

  3. js Nullish Coalescing Operator

    js Nullish Coalescing Operator 空值合并 const n = null ?? 'default string'; console.log(n); // "def ...

  4. DLL & Dynamic-link library

    DLL & Dynamic-link library 动态链接库 .dll 动态链接库(英语:Dynamic-link library,缩写为 DLL)是微软公司在微软视窗操作系统中实现共享函 ...

  5. SwiftUI & Compose View

    SwiftUI & Compose View OK // // ContentView.swift // Landmarks // // Created by 夏凌晨 on 2020/10/2 ...

  6. 5G & 音频,视频

    5G & 音频,视频 直播,webtrtc 音频,视频 基础知识 基本概念.播放流程.封装格式.编解码.传输协议 音视频播放流程 主要流程:采集 -> 前处理 -> 编码 -> ...

  7. Flutter & APP & UI Components

    Flutter & APP & UI Components 下拉刷新或者上拉加载 https://github.com/OpenFlutter/flutter_screenutil h ...

  8. COOP & COEP

    COOP & COEP Cross-Origin Opener Policy (COOP) and Cross-Origin Embedder Policy (COEP) https://de ...

  9. react 遍历 object

    @observable obj = { name: "ajanuw", age: 22, }; @computed get list() { return _.toPairs(th ...

  10. WebRTC 系列之音频会话管理

    WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的 API.W3C 和 IETF 在2021年1月26日共同宣布 WebRTC 1. ...