clearfix原理

.clearfix:after {       <----在类名为“clearfix”的元素内最后面加入内容;
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间,只是看不到而已;
height:; <----高度为0;
font-size:; <----字体大小为0;
}

链接:http://blog.sina.com.cn/s/blog_60b35e830101c1r8.html

clearfix原理的更多相关文章

  1. 学习微信小程序之css17clearfix原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css清除浮动的原理

    最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮 ...

  3. 前端学习历程--css①

    ---恢复内容开始--- 本文用自己的理解,总结网上或者自身经历的问题,加以汇总,方便查找: 一.浏览器默认样式 1.浏览器处理css&html a.css作用范围:盒子模式.浮动.定位.背景 ...

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

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

  5. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  6. bootstrap入门-3.响应式原理

    Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 ...

  7. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  8. overflow:hidden清除浮动原理解析及清除浮动常用方法总结

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

  9. Mac Dock 效果及原理(勾股定理)

    这个是苹果机上的 Dock 效果,Windows 上也有一款专门的模拟软件——RocketDock. 代码如下: <!doctype html> <html> <head ...

随机推荐

  1. 【Selenium-WebDriver自学】Selenium环境安装设置(九)

    ==================================================================================================== ...

  2. 网络表示学习Network Representation Learning/Embedding

    网络表示学习相关资料 网络表示学习(network representation learning,NRL),也被称为图嵌入方法(graph embedding method,GEM)是这两年兴起的工 ...

  3. ROS进阶学习手记 7.2 -- RViz仿真实例2:Create SmartCar

    上一节玩了 exbot 在RViz里的仿真控制,这里我们用urdf文件写个自己的小车模型,ref: http://blog.csdn.net/hcx25909/article/details/8904 ...

  4. Java URLEncoder URLDecoder

    URLDecoder 和 URLEncoder 用于完成普通字符串 和 application/x-www-form-urlencoded MIME 字符串之间的相互转换 URLDecoder类包含一 ...

  5. [记录] 解决img的1px空白问题

    第一种解决方案:把img变成块元素:display:block: 第二种解决方案:修改一下它的垂直对齐方式:vertical-align:middle: 第三种解决方案:使用浮动,让他漂浮起来:flo ...

  6. mysql 累加求和

    ; SELECT temp.*,(@csum := total + @csum) as csums from ( ) as total,month(openedDate) as date from z ...

  7. Photoshop 辅助线和标尺的使用技巧

    1.拖动辅助线时按住Alt键可以在水平辅助线和垂直辅助线之间切换.按住Alt键点击一条已经存在的垂直辅助线可以把它转为水平辅助线,反之亦然. 注意:辅助线是通过从标尺中拖出而建立的,所以要确保标尺是打 ...

  8. centos7 redis配置

    https://www.cnblogs.com/web424/p/6796993.html

  9. BBS-基于forms组件和ajax实现注册功能

    http://www.cnblogs.com/yuanchenqi/articles/7638956.html 1.设计注册页面 views.py from django import forms c ...

  10. pycharm 直接删掉数据表之后,makemigration和migrate 之后,数据库中依然没有生成数据表的问题

    综合分析一下行程这个问题的原因: 在终端中运行 select * from django_migrations; 查看 提交的记录,如果你的表删掉了,记录还在,那么数据库会觉得,这个表依然是存在的,所 ...