css3 清除浮动

eg:三个div,父级div下面有两个div分别float:left和float:right <style> .container{width:400px;border:3px soild red;} .fl{float:left;} .fr{float:right;} </style> <body> <div class="container"> <div class="fl">向左浮动</div&…

CSS3中三种清除浮动（float）影响的方式

float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决.但是凡是好用的,也容易出错.比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0等等. float的特性 1.文字环绕文字环绕效果是很明显的,这里要注意一个地方:浮动的块虽然脱离的正常的文档流,但是还会占有正常文档流的文本空间,可以看到上面第二种图,p的区域其实是顶到了img的底下的,因为float让img脱离文档流,但是p上的文字却没有顶过去,也就是说p上的一部分文字空间仍…

1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

1 background(复合属性)与font(复合属性): background: 颜色图片的链接是否平铺背景位置是否滚动.(可以随意调动或省略) Font: 粗度字体风格字体大小/行高字体样式字体大小和样式不可省略 2 行内块的间距问题行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动给父盒子设置一个高度 Clear: both Overflow…

float包裹性与破坏性及清除浮动几种方法

1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响” 学习视频录制推荐的教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子块级div元素包含一个内联img元素,此时div的高应该是图片img撑开的高度,当设置了图片img元素设置浮动后,div高度就会坍塌浮动的破坏性浮动导致高度坍陷代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars…

细微之处：比较两种CSS清除浮动的兼容

http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html 清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮动的地方都要清除. 比如,我在瑞星的项目中一直这样使用: .clear:after{content:'\0020';display:block;height:0;clear:both} .clear{*zoom:1} 观察腾讯微博项目,并不是每个浮动必须清除,但是如果内部元素连续浮动,其外部元素必然…

CSS（一）解析浮动塌陷与清除浮动

清除浮动方法 1.对父级设置适合CSS高度,父级元素撑开并且包含子元素. <p>固定高度</p> <div style="height: 50px;"> <i>Float Test</i> <div style="float: left; background: red; height: 50px;">Float Left</div> <i>Float Test</…

详解清除浮动的多种方式（clearfix）

说明本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者! 1.什么是浮动首先我们需要知道定位元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 : 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素:按照从上到下的方式逐个排列页面中的行内元素:按照从左到右的方式逐个排列但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位 2.浮动定位 float float属性取值为…

{前端CSS} 语法 Css的几种引入方式 css选择器选择器的优先级 CSS属性相关背景属性边框 CSS盒子模型清除浮动 overflow溢出属性　　定位（position）z-index

前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style="c…

详说 CSS 清除浮动

转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题.当然,随着时间的推移,这些问题终究有了一些出色的解决方案,Kayo 要在这里详细介绍的,除了是这些解决方案,还有其中的原理.(温謦提示:文章信息量大且篇幅长,请各位自备瓜子,饮料,音乐). 一.什么是清除浮动? 1.浮动的缺陷在了解如何清除浮动之前,Kayo 先介绍为什么需要清除浮动…

CSS基础必备盒模型及清除浮动

盒模型盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box; 行内元素行内元素对margin的支持行内元素不支持margin-top与margin-bottom.块级元素及行内块没有这个问题. 行内元素对padding的支持行内元素设置padding-top会向上延伸一段距离,会覆盖…

CSS学习系列2 -- CSS中的清除浮动

CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ background-color: gray; border: solid 1px black; } .myDiv img { float: left; } .myDiv p { float: right; } <div class="myDiv"> <img src=&qu…

CSS定位机制：浮动 float及清除浮动的常用方法

CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列块元素的特征: 独占一行可以设置宽高如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ul ol li dl dt d 行内元素的特征: 与其他元素同行显示不可以设置宽和高宽和高就是文字或图片的宽高常见的行内元素:span a b i u em 2.浮动浮动基础会使元素向左或向右移动,只能左右,不能上下浮动元素碰到包含框或另一个浮动框,浮动停止浮动元素之后的元素将围绕…

float浮动导致父元素高度坍塌的原因及清除浮动方法

一.浮动产生原因一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动. 二.浮动产生负作用 1.背景不能显示由于浮动产生,如果对父级设置了(CSS ba…

css清除浮动各方法与原理

说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 这就产生了一个问题:浮动元素所在父元素不会自动伸长以便闭合浮动元素,任其“红杏出墙”,这显然不符合我们的“伦理观”,所以要“抓回来”施以家法:那么如何抓呢? 提起css,提起(x)html,首先进入脑海的是楚楚动人的页面吗?不,首先应该是这楚楚动人的页面的背后的“楚楚冻人…

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow…

float---浮动带来的影响与清除浮动带来的影响方法----在路上（20）

使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此时光标上移,父标签下面的内容就会上升,影响布局,因此: 如何清除浮动带来的影响: 设高法:给父标签设置高度: clear:both:给不想受影响的标签设置: overflow:hidden:内墙法,隐藏超出部分,谁想浮动就给自己加一个overflow: clearfix:before 与after:…

[html/css]清除浮动的相关技巧

以前只了解得很浅显,转载了一篇不错的文,学习参考浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height <style type="text/…

前端之float的几种清除浮动方式

前端之float的几种清除浮动方式本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ bac…

CSS清除浮动float方法总结

使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1">1</div> <div class="d2">2</div> </div> .box{ border: 1px solid black: margin: 50px auto; padding: 50px; color: #fff; }…

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div class="father"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3"&g…

css清除浮动深度解析

首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动","绝对定位","inline-block","overflow","zoom",就这些,没有其他了.//zxx:这里的overflow特指overflow:hidden/scroll/auto属性,不包括overflow:…

css清除浮动大全共8种方法

原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox oper…

CSS清除浮动技巧

一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动. 二.浮动产生负作用 1.背景不能显示由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色…

overflow:hidden清除浮动原理

overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.…

BFC之清除浮动篇&clear

我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> <head> <title>Float</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ m…

CSS清除浮动

今天看到一篇文章关于清除浮动的,突然间脑袋短路了,咦?为什么要清除浮动?原谅我的无知,搜了下原来是这样,又倒腾出原来的笔记,唉,本来就有记录啊,而且也会经常用到,用的久了连原理都忘了.恩,防止自己再犯同样的错误,我还是自己总结整理出来吧!话不多说,代码为证! <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>为什么要清除浮动</title> &l…

CSS技巧（一）：清除浮动

什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 引用W3C的例子,news容器没有包围浮动的元素. .news { background-color: gray; border: solid 1px blac…

DIV+CSS 清除浮动方法总结

DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所帮助.感谢博客园平台!---- 来自<一只有梦想的前端小白> DIV+CSS 浮动效果是指,父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(PS:正常情况下,父元素的高是由子元素撑起来):或者因为部分子元素的而浮动,脱离文本流而造成其他元素的布局错乱的情况. DIV+…

CSS清除浮动八种方法

在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问…

ife任务刷题总结（一）－css reset与清除浮动

本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初学者也可以按照他们的任务列表,进行刷题.虽然ife名义上是针对初学者,但是我看了一下任务列表,那些任务还并不是那么简单.所以很适合初学者把任务刷一遍,我觉的,把这些任务都刷完,那么前端算是入门了. 对于代码学习来讲,除了实际的去敲,还有其他更好的学习方法吗?因此我计划按照ife的任务都刷一遍,代码提…

【css3 清除浮动】的更多相关文章