clear清除浮动
1、作用:
　　规定元素的某一侧不允许存在浮动元素

2、值:

3、应用:
　　清除其他浮动元素对其产生的影响

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>清除浮动的应用</title>

     <style>

         #box-a{

             width: 200px;

             height: 200px;

             background-color: red;

             float: left;

         }

         #box-b{

             width: 300px;

             height: 300px;

             background-color: #ff0;

             float: right;

         }

         #box-c{

             width: 800px;

             height: 100px;

             background-color:blue;

             clear:right;

         }

     </style>

 </head>

 <body>

     <div id="box-a">box a</div>

     <div id="box-b">box b</div>

     <div id="box-c">box c</div>

 </body>

 </html>

4、原理:
　　设置了clear的元素将不再像前一个浮动元素对齐，换行重新开始。

5、实际应用
　　解决网页中的“塌陷”问题
　　什么是塌陷:如果父元素只包含浮动元素，那么在未设置高度的同时，则父元素高度塌缩为零。(PS:浮动元素只会影响跟它同级别的元素，由于父元素高度塌陷为0，则跟父元素同级别的且位于父元素后面的其他元素位置也会发生上移)

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>容器的塌陷</title>

     <style>

         .wrap{

             border:10px red solid;

         }

         .main{

             width:30%;

             background-color:#ff0;

             height:150px;

         }

         .aside{

             width:50%;

             background-color:#76D8DD;

             height: 200px;

         }

         .main,.aside{

             float: left;

         }

         .div1{

             background-color: blue;

             border: solid 1px green;

             height:100px;

         }

         .clearfix{

             /*zoom属性:IE浏览器的专用属性，是IE浏览器自己写的，火狐浏览器不用写这一句，

                 这一句是专门针对老版本的IE浏览器所写的，为了兼容*/

             zoom: 1;

         }

         /* :after 伪对象选择符—在这个对象被浏览器渲染后添加一定的内容 */

         .clearfix:after{

             content: ".";/*content属性:添加的内容写在这里属性的值里面，这个属性是专门配合伪对象滴，必须写！就算值为空也必须写！*/

             display: block;/*将添加进去的内容转换为块状元素*/

             visibility:hidden;/*visibility：可视化属性，控制元素是否可见，但无论是否可见，都保留其物理空间(与display:none的比较)*/

             height: 0;/*将添加进去的内容高度设置为0，消除其占位*/

             clear: both;/*将添加进去的内容作为清除浮动的对象，实现外围容器中有内容存在，因此可以自动判定高度，解决塌陷*/

         }

     </style>

 </head>

 <body>

     <div class="wrap clearfix">

         <div class="main">main</div>

         <aside class="aside">aside</aside>

     </div>

     <div class="div1"></div>

 </body>

 </html>

【CSS】clear清除浮动的更多相关文章

  1. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  2. CSS clear 清除浮动，兼容各浏览器

    .clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clear{zoom ...

  3. 【css】清除浮动（clearfix 和 clear）的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...

  4. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  5. CSS——如何清除浮动

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...

  6. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  7. day68-CSS-float浮动，clear清除浮动，overflow溢出

    1. float 浮动 1.1 在 CSS 中,任何元素都可以浮动. 1.2 浮动元素会生成一个块级框,而不论它本身是何种元素.内联标签设置浮动,就变成了块级标签. 1.3 关于浮动的两个特点: 浮动 ...

  8. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  9. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

随机推荐

  1. django请求的生命周期

    1. 概述 首先我们知道HTTP请求及服务端响应中传输的所有数据都是字符串. 在Django中,当我们访问一个的url时,会通过路由匹配进入相应的html网页中. Django的请求生命周期是指当用户 ...

  2. 不再迷惑，无值和NULL值

    在关系型数据库的世界中,无值和NULL值的区别是什么?一直被这个问题困扰着,甚至在写TSQL脚本时,战战兢兢,如履薄冰,害怕因为自己的一知半解,挖了坑,贻害后来人,于是,本着上下求索,不达通幽不罢休的 ...

  3. storm从入门到放弃(三)，放弃使用 StreamId 特性

    序:StreamId是storm中实现DAG有向无环图的重要一个特性,但是从实际生产环境来看,这个功能其实蛮影响生产环境的稳定性的,我们系统在迭代时会带来整体服务的不可用. StreamId是stor ...

  4. [Direct2D开发] 绘制网格

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.引言 最近在使用Direct2D进行绘制工作中,需要实现使用Direct2D绘制网格的功能.在网上查了很多资料,终于实 ...

  5. Azure 基础：Queue Storage

    Azure Storage 是微软 Azure 云提供的云端存储解决方案,当前支持的存储类型有 Blob.Queue.File 和 Table. 笔者在前文中介绍了 File Storage 的基本用 ...

  6. Tkernel Package NCollection哈希基础的类

    OpenCASCADE内用到了很多由诸如NCollection_Map, NCollection_DataMap, NCollection_DoubleMap, NCollection_Indexed ...

  7. 《Pro SQL Server Internals, 2nd edition》的CHAPTER 3 Statistics中的Introduction to SQL Server Statistics、Statistics and Execution Plans、Statistics Maintenance(译）

    <Pro SQL Server Internals> 作者: Dmitri Korotkevitch 出版社: Apress出版年: 2016-12-29页数: 804定价: USD 59 ...

  8. QUIC和TCP

    作者:henrystark henrystark@126.com Blog: http://henrystark.blog.chinaunix.net/ 日期:20140626 本文遵循CC协议:署名 ...

  9. CEPH LIO iSCSI Gateway

    参考文档: Ceph Block Device:http://docs.ceph.com/docs/master/rbd/ CEPH ISCSI GATEWAY:http://docs.ceph.co ...

  10. Daily Scrum - 11/16

    时间:午饭 今天小组例会主要是汇报了各自的进度.任烁那边主要为工程添加了单词的类(包含各个参数等成员变量),方便以后实现算法:拜重阳实现了一个简易的“点进-点出”UI,可谓迈出了艰难的第一步:章玮和罗 ...