清除float浮动三种方式
Float的作用？
w3c的官方解释：
Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.
看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
.parent {
background: blue;
height: 400px;
color: white;
font-family: Arial, sans-serif;
} .child1 {
width: 30px;
height: 30px;
background: red;
float: left;
} .child2 {
background: green;
height: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2">This text flows around the red box. The green box that holds the text doesn't.</div>
</div>
</body>
</html>
效果如下：
注意到绿色的box表现的就像红色的box根本不存在一样，但是白色的文字却“浮动”在红色box周围。
这就是float做的事情：它们导致其他的浮动元素和inline内容浮动在它们周围，但是其他block box却完全不理会float。
w3c的定义就像是在描述绝对定位元素一样，我更加倾向于将float描述成float是脱离正常流(normal flow)且和兄弟block元素相关的。
不管怎样解释，你应该知道不论浏览器怎样先进，它们永远不会自动的清除浮动——因为float的行为不是一个bug，而是特点。
清除浮动的方法
让我们先说主流的方法：
clear: both/left/right
除了“none”以外的任何属性值都将导致元素相应位置不允许浮动。
overflow: hidden/auto
float导致了元素坍塌，如果你想让父元素包含所有的float属性元素，那么考虑在父元素上使用overlow:hidden/auto
clearfix
最好的方法是使用clearfix属性，下面的代码适用到IE6。
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 only */
.clearfix {
*zoom:;
}
如果你想适应IE8及其以上的，只要
.clearfix:after {
content: "";
display: table;
clear: both;
}
你所要做的就是将clearfix类添加到包含floated的父元素上，你当然也可以使用overlow:hidden但是会导致很多布局上的其他问题。
清除float浮动三种方式的更多相关文章
- css清除浮动float的三种方法总结
原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...
- 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- HTML连载49-清除浮动的第三种方式（内外墙法）
一.清除浮动的第三种方式 1.隔墙法有两种如下:外墙法和内墙法. 2.外墙法 (1)在两个盒子中间添加一个额外的块级元素 (2)给这个额外添加的块级元素设置:clear:both;属性 注意点: ...
- python 全栈开发，Day94(Promise,箭头函数,Django REST framework,生成json数据三种方式,serializers,Postman使用,外部python脚本调用django)
昨日内容回顾 1. 内容回顾 1. VueX VueX分三部分 1. state 2. mutations 3. actions 存放数据 修改数据的唯一方式 异步操作 修改state中数据的步骤: ...
- HTML5实现动画三种方式
编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...
- [转] Bound Service的三种方式（Binder、 Messenger、 AIDL）
首先要明白需要的情景,然后对三种方式进行选择: (一)可以接收Service的信息(获取Service中的方法),但不可以给Service发送信息 (二) 使用Messenger既可以接受Servic ...
- Java Class类以及获取Class实例的三种方式
T - 由此 Class 对象建模的类的类型.例如,String.class 的类型是Class<String>.如果将被建模的类未知,则使用Class<?>. publi ...
- 编写Unity3D着色器的三种方式
不管你会不会写Unity3D的shader,估计你会知道,Unity3D编写shader有三种方式,这篇东西主要就是说一下这三种东西有什么区别,和大概是怎样用的. 先来列一下这三种方式: fixed ...
- PHP中数据类型转换的三种方式
PHP中数据类型转换的三种方式 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: 1.(int).(integer):转换成整形2.(float).(double).(real):转换成 ...
随机推荐
- 将ActiveX控件标记为安全
參考网页 http://msdn.microsoft.com/en-us/library/aa751977(v=vs.85).aspx http://support.microsoft.com/kb/ ...
- apue学习笔记（第六章 系统数据文件和信息）
UNIX系统的正常运作需要使用大量与系统有关的数据文件,例如,口令文件/etc/passwd和组文件/etc/group就是经常被多个程序频繁使用的两个文件. 口令文件 UNIX系统口令文件包含如下字 ...
- NightWatchJS(转）
关于Nightwatch? Nightwatch.js是一个测试web app和web 站点的自动化测试框架, 使用Node.js编写, 基于Selenium WebDriver API. 它是一个完 ...
- Python模拟登录12306
#!/usr/bin/python # -*- coding: utf-8 -*- import re; import sys; import cookielib; import urllib; im ...
- Nginx性能测试
环境:Centos 7.0 Nginx 1.6.2 测试工具:siege 3.0.7 配置1: I3-3110M 4G 测试1(100用户,1000请求): 平均响应:0.06s 并发数:59.19 ...
- 安装Redis 非结构化数据库
1.官网下载安装包 1) 首先在Redis官网下载安装包: http://redis.io/download(redis-4.0.9.tar.gz) 2.在/usr/local/创建一个redi ...
- 设计TCP服务器的规则
设计TCP服务器,采用如下规则: 1.正等待连接请求的一端有一个固定长度的连接队列,该队列中的连接已被TCP接受(完成三次握手),但还没有被应用层接受.注意:TCP接受一个连接是将其放入这个队列,而应 ...
- Windows操作系统远程Linux服务器传输文件方法（以EasyDSS云平台、EasyNVR上传部署为例）
本文转自博客:https://blog.csdn.net/black_3717/article/details/79769406 问题背景: 之前给客户部署我们一款EasyDSS云平台(配合EasyN ...
- EasyRTMP+EasyDSS实现一套完整的紧急视频回传直播与存储回放方案
需求来源 紧急视频回传云端:即拍即传.云端存储.紧急录像.云拍云录!这些需求现在可能对于我们来说比较远,大部分也是在行业中才会用到,但相信在不就的将来肯定会落地到每个人的手中,因为这是一个自我保护.自 ...
- Centos7升级python版本
升级Python 我的安装目录是/home/python 下载 ` cd /home/python wget https://www.python.org/ftp/python/3.5.0/Pytho ...