彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种:
1.标准流。
所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的。
以前我们学习的都是标准流。
注意:标准流使我们网页布局中最稳定的一种结构
2. 浮动流
使我们学习的脱离标准流的第一种方式。会影响我们标准流的排列。所以,我们布局的时候,能用标准流做的,就不用浮动做。
3. 定位流
定位流也是脱离标准流的一种模式。它完全脱离标准流,不会对标准流有影响。
浮动(float)
我们要浮动的目的: 我们浮动的目的,就是可以把多个块级元素放到想要的一行上。
浮动 Float: left right none
你不得不必须知道详细的理解浮动:
1. 浮动已经脱离的标准流。 (脱标)
也就是说,浮动已经漂浮在标准流的上方。
2. 因为我们的浮动是左右浮动,所以我们的块级元素都是左右排列。
清除浮动(clear)
如果想要我们做的网页浏览器兼容性好,首先要保证的是,我们写的代码要足够标准。
清除浮动的原因: 因为浮动会影响标准流。所以我要根据不同情况来清除浮动。
Clear:both;
1.1.1额外标签法
W3c推荐,再最后一个浮动的盒子的后面,新添加一个标签。然后他可以清除浮动。
优点: 通俗好理解
缺点: 增加了太多的标签
1.1.2Overflow 清除浮动
使用方法: 是浮动的大盒子(父级标签)再样式里面加: overflow:hidden;为了照顾ie6,我们再加上 zoom:1;
优点: 代码书写方便
缺点: 如果这个父盒子,里面还有定位,就会引起麻烦。
1.1.3 After伪类清除浮动
- 声明清除浮动:
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
height:0;
}
.clearfix{ /* 为了照顾ie6浏览器*/
zoom:1;
}
- 调用
<div class="box clearfix">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow清除浮动</title>
<style type="text/css">
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
height:0;
}
.clearfix{ /* 为了照顾ie6浏览器*/
zoom:1;
}
.box{width:400px;}
.one,.two{width:200px; height:100px; background-color:#093; float:left;}
.two{background-color:#39F;}
.test{width:400px; height:120px; background-color:#900;}
</style>
</head>
<body>
<div class="box clearfix">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="test"></div>
</body>
</html>
优点: 一次写完,后面直接调用就可以了
缺点: 声明麻烦写
1.1.4After before伪类清除浮动
- 声明清除
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{ /*照顾ie6*/
zoom:1;
}
使用:
<div class="box clearfix">
第四种,是大部分大型网站常用的,比如新浪 淘宝 的清除浮动的效果。
以上希望对大家有所帮助。
小强零零壹和大家一起分享。
彻底理解浮动float CSS浮动详解 清除浮动的方法的更多相关文章
- css属性详解和浮动
一.CSS属性组成和作用 属性:属性值 1)每个css样式都必须由两部分组成:选择符和声明 注:声明又包括属性和属性值 2)css属性:属性是指定选择符具有的属性,他是css的核心,css2共有150 ...
- 详解 清除浮动 的多种方式(clearfix)
说明 本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者! 1.什么是浮动 首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 : ...
- html5的float属性超详解(display,position, float)(文本流)
html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...
- 带你走进CSS定位详解
学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...
- 此博客使用的CSS样式详解!
此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...
- CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
- css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
- JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
- 详解Python模块导入方法
python常被昵称为胶水语言,它能很轻松的把用其他语言制作的各种模块(尤其是C/C++)轻松联结在一起.python包含子目录中的模块方法比较简单,关键是能够在sys.path里面找到通向模块文件的 ...
随机推荐
- COB工艺流程及基本要求
工艺流程及基本要求 清洁PCB---滴粘接胶---芯片粘贴---测试---封黑胶加热固化---测试---入库 1.清洁PCB 清洗后的PCB板仍有油污或氧化层等不洁部分用皮擦试帮定位或测试针位对擦拭的 ...
- HDU 1147 Pick-up sticks
题解:每放一根棍子,都判断一下它与它前面的且在顶端的棍子是否相交,相交的话则将相应的棍子从解空间中除去. #include <cstdio> const double eps=1e-14; ...
- poj 1204 Word Puzzles(字典树)
题目链接:http://poj.org/problem?id=1204 思路分析:由于题目数据较弱,使用暴力搜索:对于所有查找的单词建立一棵字典树,在图中的每个坐标,往8个方向搜索查找即可: 需要注意 ...
- 表格java代码的相关知识积累
本文主要收集各大博客中的java表格 用JSP创建一个表格模板 . 项目中要用到一些展示信息的表格,表头不固定,表格内容是即时从后台取的:考虑到复用性,笔者用jsp编写了一个表格模板,可以从reque ...
- 一道月薪3W的java面试题 (小明和小强都是张老师的学生,张老师的生日是某月某日,2人都不知道张老师的生日)
小明和小强都是张老师的学生,张老师的生日是M月N日,2人都知道张老师的生日 是下列10组中的一天,张老师把M值告诉了小明,把N值告诉了小强,张老师问他们知道他的生日是那一天吗? 3月4日 3月5日 3 ...
- Android GPS应用:动态获取位置信息
在上文中,介绍了GPS概念及Android开发GPS应用涉及到的常用类和方法.在本文中,开发一个小应用,实时获取定位信息,包括用户所在的纬度.经度.高度.方向.移动速度等.代码如下: Activity ...
- STL之priority_queue为复合结构排序
priority_queue为复合结构排序: #include <iostream> #include <queue> using namespace std; struct ...
- 实现AJAX局部刷新以及PageMethod方法的使用
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- .net平台是什么?.net平台的组成,.net平台的好处
1..net(dotnet)平台是什么? .net平台是微软公司设计的一个用于开发各种应用的"框架"和程序的运行环境. 2..net平台的组成: a..net Framework( ...
- C语言之自守数
自守数 自守数是指一个数的平方的尾数等于该数自身的自然数,如25*25=625,76*76=5776.要求求出一定范围内的所有自守数. 题目分析: 刚拿到这个题目的时候认为解题关键在于,测试该数平方数 ...