清除浮动clear/BFC

浮动的清除有两种方式:

一、clear

  clear:both/left/right;

二、创建BFC

  (1)什么是BFC?

  BFC,块级格式化上下文,是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。通俗的讲就是相当于一个把浮动的元素框起来并隔离的容器,容器里面的子元素不会影响到外面元素,使浮动不会溢出。

  (2)哪些元素会生成BFC?

  ①根元素或其它包含它的元素

  ②float的值不为none

  ③overflow的值不为visible

  ④display的值为inline-block/table-cell(表格单元格)/table-caption(表格标题)/flex/inline-flex

  ⑤position的值为absolute/fixed

  (3)BFC还有哪些作用?

  BFC除了可以用来清除浮动,还可以用于防止margin折叠、左右两栏布局这两个作用。

  

时间: 2024-10-11 21:44:43

清除浮动clear/BFC的相关文章

清除浮动clear:both的应用详解

清除浮动clear:both的应用详解 2008-03-30 19:47:14  来源:cnbruce 在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边.这个属性是用来控制float属性在文档流的物理位置的. 当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这

css清除浮动clear:left-right-both示例效果

示例很简单,图片有简单.容易理解的说明文字了: 理解: clear有四个值: none:允许左右两边有浮动对象: both:不允许左右两边有浮动对象: left:不允许左边有浮动对象: right:不允许右边有浮动对象. 附上demo示例代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

5.清除浮动(clear)

问题引入:普通的div被浮动的div覆盖了,所以要想让普通的元素不被覆盖. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"

clear清除浮动最佳实践和BFC清除浮动

浮动的三个特点很重要. 1. 脱离文档流. 2. 向左/向右浮动直到遇到父元素或者别的浮动元素. 3. 浮动会导致父元素高度坍塌. 那么clear清除浮动的最佳实践是什么呢?cleafix是最外层的div.请看如下代码: // 现代浏览器clearfix方案,不支持IE6/7 .clearfix:after { display: table; content: " "; clear: both; } // 全浏览器通用的clearfix方案 // 引入了zoom以支持IE6/7 .cl

清除浮动塌陷的4种经典套路

原文地址;http://www.cnblogs.com/chedabang/p/5973601.html "自古深情留不住,总是套路得人心."这些日子,各个朋友圈随时可以见到这句话的身影.的确人们常说:"多一点真诚,少一点套路.",但是最终现象写实也是那么残酷和无奈. 同样在前端攻城狮的道路,我们都是真诚尽心尽力的去学习进取.奈何先是各大浏览器厂商的大战不断,导致我们这群学习的人苦不堪言,一片水生火热呀.不得不想进各种hack方法解决.(没错,这里就是吐槽的IE6!

CSS中的浮动和清除浮动

浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场景. 浮动有哪些特征? 浮动的特征就体现在前文的那句话中

CSS float 与 清除浮动

CSS浮动规则: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 浮动1: 设置float : right,元素脱离文档流并向上向右移动,直到它的右边缘碰到包含块的右边缘. 浮动2: 当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘. 因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失. 浮动3: 如果把所有三个框都向

CSS中的浮动和清除浮动,梳理一下!

CSS中的浮动和清除浮动,梳理一下! 第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧. 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline

【转】CSS中的浮动和清除浮动

以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场景.