CSS中 清除浮动解决“包含问题”
今天看到大神对浮动定位作了个详细的分析 刚好就分析了当时任务三遇到的问题
在一个div中定义了三个div,让横向排列,结果父元素div的背景色显示不出来了 ,这是个经典问题----包含浮动
<div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 100px;
float: left;
margin: 10px;
width: 200px;
} 解决方法(3个):
1)在容器的结束标签前添加一个空标签,在空标签上直接设置样式“clear:both”。用这种方法来清除浮动,在大多数情况下是有效的,但这不太适合语义化。
这取决于一个页面有多少浮动需要清除,这样造成页面上的空标签迅速堆积,而且在页面中没有上下文内容。 2)Overflow技巧
一种清除浮动的技巧是使用“overflow”属性。在具有浮动元素的父容器中设置“overflow”的属性值为“auto”,这样父容器就会有一个高度存在,
在我们例子中的灰色背景也就能看得到了。
3)clearfix技巧
“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类,我们可以在浮动元素的父容器前面和后面创建隐藏元素。
“:before”伪类是用来防止子元素顶部的外边距塌陷,使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。
“:after”伪类是用来防止子元素的底部的外边距塌陷,以及用来清除元素的浮动。
在IE6和7的浏览器中,加上“*zoom”属性来触发父元素的haslayout机制。决定了元素怎样渲染内容,以及元素与元素之间的相互影响。
CSS中 清除浮动解决“包含问题”的更多相关文章
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
- CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...
- CSS中清除浮动的方法
CSS浮动,最早是为了达到文字环绕的效果提出的,也可以用来做布局,但是布局会产生很多问题(高度塌陷,漂浮在普通流上),会使当前标签产生上浮的效果,会影响前后标签,同样的代码在不同的浏览器的兼容性也不一 ...
- CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法
在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...
- css 中的浮动
css中 浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中 浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐 ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
- css中的浮动以及清除浮动
对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
随机推荐
- Gow工具
一 Gow 是什么 Gow (Gnu On Windows) is the lightweight alternative to Cygwin. It uses a convenient NSIS i ...
- this .运算符 和 [] 运算符
首先看这个 这两个运行结果是不一样的 前两个是3 后面是10 var length = 10; var arr = [function(){console.log(this.length);},2 ...
- 贴片陶瓷电容的NPO、C0G、X7R、X5R、Y5V、Z5U辨析
NPO与X7R.X5R.Y5V.Z5U神马的有啥区别?主要是介质材料不同.不同介质种类由于它的主要极化类型不一样,其对电场变化的响应速度和极化率亦不一样. 在相同的体积下的容量就不同,随之带来的电容器 ...
- linux中find批量删除空文件及空文件夹
linux下批量删除空文件(大小等于0的文件)的方法 代码如下 复制代码 find . -name "*" -type f -size 0c | xargs -n 1 rm -f ...
- 动态调用python类和函数
类 class test1(object): def __init__(self): print "i am test1" class test2(object): def __i ...
- Ubuntu嵌入式开发环境配置问题集锦(不断更新)
本文章主要记录在建立嵌入式开发环境中遇到的各种问题,并详细写上解决方法. 我的开发环境为:win7+Vmware9.0+Ubuntu12.04 之所以选择这样的开发环境是因为:1. 有 ...
- mysql 的卸载、再安装与常用命令
1.卸载mysql.完全删除: 删除 mysqlsudo apt-get autoremove --purge mysql-server-5.0sudo apt-get remove mysql-se ...
- 关于typedef之四种用途 和 两个陷进
typedef用来声明一个别名,typedef后面的语法,是一个声明.本来笔者以为这里不会产生什么误解的,但结果却出乎意料,产生误解的人 不在少数.罪魁祸首又是那些害人的教材.在这些教材中介绍type ...
- SMACSS:一个关于CSS的最佳实践-3.Layout Rules
本篇笔者要介绍的是Layout Rules.看完本篇,大家将会知道Layout Rules的作用,以及哪些CSS应该归类为Layout Rules. 什么是Layout Rules? Layout R ...
- ASP.NET之电子商务系统开发-3(订单)
一.前言 继上次的购物车,这是第三篇.记录一下订单功能.这功能做的时候,走过弯路,很是烧脑,因为思路没理顺,数据库设计的也不怎么好,做到一半才发现有问题,接着把数据库重新设计好,理清思路后,终于完成了 ...