更优雅的清除浮动float方法
上篇文章是利用 :after 方法清除浮动float(作用于浮动元素的父元素上)。
.outer { zoom:; } //为了兼容性,因为ie6/7不能使用伪类,所以加上此行代码。
.outer:after { clear:both;content:'';display:block;width:;height:;visibility:hidden; }
现在可以改写成更优雅的代码:
.outer:before, .outer:after{
content: "";
display: table;
}
.outer:after{
clear: both;
}
更优雅的清除浮动float方法的更多相关文章
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
- css清除浮动的方法总结
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 we ...
- 详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
随机推荐
- 公众帐号如何向用户发送emoji表情(php版,附emoji编码表)
//字节转Emoji表情 function bytes_to_emoji($cp) { if ($cp > 0x10000){ # 4 bytes return chr(0xF0 | (($cp ...
- 成员变量和成员函数前加static的作用?
成员变量和成员函数前加static的作用?答:它们被称为常成员变量和常成员函数,又称为类成员变量和类成员函数.分别用来反映类的状态.比如类成员变量可以用来统计类实例的数量,类成员函数负责这种统计的动作 ...
- 史上最简单的SpringCloud教程 | 第十二篇: 断路器监控(Hystrix Dashboard)
转载请标明出处: 首发于:https://www.fangzhipeng.com/springcloud/2017/07/12/sc12-hystix-dashbd/ 本文出自方志朋的博客 最新Fin ...
- 【赛时总结】 ◇赛时·II◇ AtCoder ABC-100
◆赛时·II◆ ABC-100 ■唠叨■ ABC终于超过百场比赛啦(毫不犹豫地参加).然后莫名其妙的好像是人很多,评测慢得不可理喻.然后我就--交了一大发--错误程序--然后B题就没了.最后的D题居然 ...
- 基于PHP的微信公众平台开发(TOKEN验证,消息回复)
微信公众平台开发 实现步骤: 第一步:填写服务器配置 登录微信公众平台官网后,在公众平台后台管理页面 - 开发者中心页,点击“修改配置”按钮,填写服务器地址(URL).Token和EncodingAE ...
- 《JSON笔记之三》---postman中传入json串
1.关于如何使用postman工具,简单的介绍一下, 用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等 ...
- tcl之过程/函数-proc
- JZOJ 5914. 盟主的忧虑
Description 江湖由 N 个门派(2≤N≤100,000,编号从 1 到 N)组成,这些门派之间有 N-1 条小道将他们连接起来,每条道路都以“尺”为单位去计量,武林盟主发现任何两个 ...
- 裸机——LCD
1.先了解显示器们 CRT显示器 原理,使用电子轰击荧光粉实现显示. 特点,主动发光,颜色绚丽,但是大. 等离子显示器(PDP) 原理,在显示屏上排列上千个密封的小低压气体室,通过电流激发使其发出肉眼 ...
- BFS例题:A计划
ContribContrib/a11y/accessibility-menu.js 关于 BFS要点: 1.若为可化为的坐标系图形,可用结构体存储其x值,y值和步数.(一般开now 和 next ,n ...