clearfix原理
【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原理的更多相关文章
- 学习微信小程序之css17clearfix原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css清除浮动的原理
最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮 ...
- 前端学习历程--css①
---恢复内容开始--- 本文用自己的理解,总结网上或者自身经历的问题,加以汇总,方便查找: 一.浏览器默认样式 1.浏览器处理css&html a.css作用范围:盒子模式.浮动.定位.背景 ...
- css中clearfix清除浮动的用法及其原理示例介绍
clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: b ...
- css用clearfix清除浮动
本文从http://www.studyofnet.com/news/196.html复制. 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...
- bootstrap入门-3.响应式原理
Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 ...
- 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解
CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...
- overflow:hidden清除浮动原理解析及清除浮动常用方法总结
最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...
- Mac Dock 效果及原理(勾股定理)
这个是苹果机上的 Dock 效果,Windows 上也有一款专门的模拟软件——RocketDock. 代码如下: <!doctype html> <html> <head ...
随机推荐
- day6--面向对象初识
一面向过程与面向对象 面向过程: 流水线式的思维,顺着流程进行下去,类似于代码的堆叠,重视步骤 优点:不需要考虑太多东西,想到一个功能就写一个功能,堆叠代码 缺点:过程往往是先后执行的,要想变换功能或 ...
- java 日期排序。。。。
Collections.sort(list, new Comparator<Map<Object, Object>>() { public int compare(Map< ...
- Java-1.6-并发包-集合
List相关 对于List并发包就只扩展了一个CopyOnWriteArrayList<E> Set相关 对于Set,并发包扩展ConcurrentSkipListSet<E> ...
- 重识linux-SSH中的SFTP
重识linux-SSH中的SFTP 1 SFTP也是使用SSH的通道(port 22) 2 SFTP是linux系统自带的功能 3 连接上主流的ftp软件都支持sftp协议 比如flashfxp,fi ...
- Java,Hello World,《算法》环境搭建中的问题,用 cmd 和 IntelliJ Idea 分别编译和运行 Java 程序
▶ IntelliJ idea 下载和安装(http://www.jetbrains.com/idea/) ▶ 新建项目(如图),注意选择 SDK 类型和位置 ● 在 src 目录中新建一个 Pack ...
- python学习笔记_week18
note 1.JS 正则 test - 判断字符串是否符合规定的正则 rep = /\d+/; rep.test("asdfoiklfasdf89asdfasdf") # true ...
- Maven项目指定JDK版本
<build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...
- 水仙花在python3在pycharm的实现
---恢复内容开始--- #方法一:#-*- coding: utf-8-*-while True: num = input("请输入一个三位数") num = int(num) ...
- 转载:官方Caffe-windows 配置与示例运行
转载来自:http://blog.csdn.net/guoyk1990/article/details/52909864 本文主要介绍官方给出的caffe-windows的配置及如何训练mnist数据 ...
- 使用STM32CubeMX生成RTC工程[闹钟中断]
使用的硬件为正点原子的MINISTM32. 需要主要注意: STM32F1系列 <UM1850 User manual Description of STM32F1xx HAL drivers ...