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. python-运算符重载

    1. __item__ class X: def __init__(self, data=None): self.data = data or [] # 同样可用于 dict def __setite ...

  2. mysql 替代Oracle instr

    在迁移项目时遇到的,原项目的数据库使用的Oracle,现在要迁移到MySQL中,而项目中用到了Oracle的instr函数,而MySQL只能查找子串是否在父串中,没法按照出现的次数进行查找. 先来介绍 ...

  3. 1.python进程、线程、多线程

    2018-07-16 1.进程 简单理解:进程就是一段程序执行的过程. 广义理解:进程就是一个具有一定独立功能的程序关于某个数据集合的一次运行活动. 进程是cpu调度和分配的基本的分配单元,也是基本的 ...

  4. springMVC源码学习之获取参数名

    1.入口到参数处理调用流程 入口为spring-webmvc-4.3.18.RELEASE.jar中org.springframework.web.servlet.DispatcherServlet. ...

  5. 【ASP.NET 问题】Win7中IIS被防火墙阻止导致外网无法访问的解决方法。

    今天装了IIS7.0,把网站发布了上去,但局域网的其他电脑始终无法访问主机上的网站. 于是想到防火墙的原因,把防火墙关掉,可以正常访问,但是打开就不行. 于是去网上找资料,总算搞定了. 原来在防火墙的 ...

  6. js 简单算法

    1. 嵌套数组打平并且去重 ,,,,,,,,[,,,,[,,]]]; var obj = {};//去重标识 function test(data) { var newArr = []; for ( ...

  7. oracle数据库关闭了打开数据库

    一.找到sqlplus

  8. MySQL null与not null和null与空值''的区别

    参考连接:https://segmentfault.com/a/1190000009540449 相信很多用了MySQL很久的人,对这两个字段属性的概念还不是很清楚,一般会有以下疑问: 我字段类型是n ...

  9. Pycharm 字体大小快捷方式设置

    1.File->Settings 2.在搜索框搜索increase 点击Increase Font Size(增大字体)右键选择 Add Mouse Shortcut 然后按Ctrl并且鼠标滚轮 ...

  10. redis集群报错:(error) MOVED 11469 192.168.163.249:7002

    应该是你没有启动集群模式(即缺少了那个"-c"): redis-cli -c -h yourhost -p yourpost