参考：http://www.divcss5.com/jiqiao/j406.shtml
副作用：一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，背景色不显示（如果父级不设高度）。
清除方法：在父级结束前加一个 专门清除浮动的 div 并设置设置CSS clear:both; 属性， 即可解决。
时间： 2024-08-24 09:10:15
CSS 浮动副作用 ，清除浮动
CSS 浮动副作用 ，清除浮动的相关文章
css浮动和清除浮动
浮动存在的原因 在word排版中,文本可以环绕图片.在css中,想要实现文字环绕的效果,只能借助于float,没有其他的替代方式.在实际中,文档的布局经常会使用浮动. float属性 float属性,默认为none,也就是标准流通常的情况.如果将float的属性的值设置为left或right,元素就会向其父元素的左侧或右侧紧靠. inherit表示从父元素继承float属性的值. clear属性 clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为
css用clearfix清除浮动
什么是.clearfix .clearfix:after { content: "."; /*内容为"."就是一个英文的句号而已.也可以不写.*/ display: block; /*加入的这个元素转换为块级元素.*/ clear: both; /*清除左右两边浮动.*/ visibility: hidden; /*可见度设为隐藏.注意它和display:none;是有区别的.visibility:hidden;仍然占据空间,只是看不到而已:*/ line-heig
CSS浮动与清除浮动(overflow)例子
在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧． float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神奇,于是乎就去问了师匠: Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes which are e
CSS基础之清除浮动
CSS基础之清除浮动 本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的.本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝赐教.以下是我总结的三种行之有效而且比较简单实用的方法. 一.父级div定义伪类 :after 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
CSS中的浮动和清除浮动，梳理一下！
CSS中的浮动和清除浮动,梳理一下! 第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧. 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline
【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场景.
关于浮动与清除浮动，你应该知道的
我在做页面布局的时候,多多少少总会受到来自浮动的困扰,因此专门通过实践来总结一下浮动与清除浮动. 首先总结几个基础的概念: 浮动:设置浮动的元素会脱离文档流,不会影响块元素的布局,但是会影响内联元素的排列[通常是文本]: 文档流:在文档流中,块元素会单个元素独占一行 接下来我们通过实际演示来看看关于浮动的那些事儿. 下面是5个div块元素在文档流中一次排列 我们知道浮动元素有几个规律 如果浮动元素的上一个元素也是浮动,那么该元素会与上一个元素排列在同一行,如果行宽不够,后面的元素会被挤到下一行
css中元素的浮动和清除浮动的影响
用float属性可以使元素浮动到包含框内的左右边使文本围绕它,这里创建一个包含框内有段落和一个小的div并被包围: <html> <head> <title><title> <style type="text/css"> div{ border:1px solid red; width:200px; height:200px; } .div1{ background-color:yellow; float:right; wid
Css学习之清除浮动的方法详解
本文和大家分享的主要是css中浮动清除相关内容,一起来看看吧,希望对大家学习css http://www.maiziedu.com/course/web/有所帮助. 当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. #div { background-color: blu
ife任务刷题总结（一）－css reset与清除浮动
本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初学者也可以按照他们的任务列表,进行刷题.虽然ife名义上是针对初学者,但是我看了一下任务列表,那些任务还并不是那么简单.所以很适合初学者把任务刷一遍,我觉的,把这些任务都刷完,那么前端算是入门了. 对于代码学习来讲,除了实际的去敲,还有其他更好的学习方法吗?因此我计划按照ife的任务都刷一遍,代码提