想要清除浮动就要在父元素上 加上 clearfix:after

.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容;
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;
line-height: 0; <----行高为0;
height: 0; <----高度为0;
font-size:0; <----字体大小为0;
}
.clearfix
{ *zoom:1;}
<----这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。

clearfix:after 的用法的更多相关文章

  1. css清除浮动clearfix:after的用法详解

    如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法:  CSS代码: 复制代码 代码如下: .clearfix:after ...

  2. clearfix的最佳方案----在路上(22)

    clearfix的纠结 骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.cle ...

  3. 解读浮动闭合最佳方案:clearfix

    .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题. ...

  4. Clearing Floats清除浮动--clearfix的不同方法的使用概述

    清除浮动早已是一个前端开发人员必学的一课.毫无疑问,多年来,我们已经接触过多种清除浮动的方法,现在“clearfix methods”越来越被大家熟知.在深入剖析“clearfix”的多种用法之前,我 ...

  5. 浮动闭合最佳方案:clearfix

    之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得知很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} ...

  6. PC-常见问题-清除浮动

    常用:.clear{clear:both;height:0px;overflow:hidden;}>最优浮动闭合方案(这是我们推荐的): .clearfix:after{content:&quo ...

  7. 【css】清除浮动(clearfix 和 clear)的用法

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

  8. clearfix的用法(转)

    clearfix的用法 (2013-12-31 10:41:24) 标签: clearfix 清除浮动 clearboth height zoom 分类: 网页制作 如果有一个DIV作为外部容器,内部 ...

  9. css中clearfix清除浮动的用法及其原理示例介绍

    clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: b ...

随机推荐

  1. python爬虫及结巴分词《攀登者》影评分析

    <攀登者>影评爬取及分析 0.项目结构 其中simkai.ttf为字体文件,Windows查看系统自带的字体 C:\Windows\Fonts 一.爬取豆瓣影评数据 # -*- codin ...

  2. keep-alive 组件级缓存

    前言 在Vue构建的单页面应用(SPA)中,路由模块一般使用vue-router.vue-router不保存被切换组件的状态, 它进行push或者replace时,旧组件会被销毁,而新组件会被新建,走 ...

  3. create-react-app踩坑记

    前言 哇,不的不说这个react 这个脚手架create-react-app脚确实有很多问题,哈哈,下面来看看吧有哪些坑: 引用sass或者less 记得16年还是几年是不支持sass,和less的, ...

  4. java面向对象4-多态

    5 多态 5.1多态:polymorphism概念 定义:某一类事物的多种存在形态表现形式:父类变量指向子类实例 例:动物中猫,狗 猫这个对象对应的类型是猫类型 猫 x = new 猫(); 同时猫也 ...

  5. MYSQL<一>

    -- ########## 01.数据库概述 ########## -- 1.信息:现实世界中各种可以接触到的东西 -- 2.数据:信息在计算机世界中的映射(反映) -- Java中可以把数据存储在内 ...

  6. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  7. LDA终极分析

    http://www.cnblogs.com/pinard/p/6867828.html http://www.52nlp.cn/lda-math-mcmc-和-gibbs-sampling2 htt ...

  8. Getting CFNetwork SSLHandshake failed (-9806) error

    平常个人打测试包一切OK,今天突然不能联网了 How to handle "CFNetwork SSLHandshake failed" in iOS 参考1 Getting CF ...

  9. SSH port forwarding: bind: Cannot assign requested address

    https://www.electricmonk.nl/log/2014/09/24/ssh-port-forwarding-bind-cannot-assign-requested-address/

  10. windows server 2008 r2 配置ftp (FileZilla Server )

    1.需要个ftp 2.在华为云内部,用IIS,配置后如果用主动模式,客户端需要配置后客户端需要做配置才能访问,去掉√,见下图. 3.华为云的教程,配被动需要把1024以上的端口都放开,不安全! 但客户 ...