为什么bfc可以解决浮动

加overflow-hidden就可以解决高度塌陷问题，overflow-触发BFC

1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生成一个独立的块圾上下文,就像在window全局作用域内,声明了一个function就会生成一个独立的作用域一样,新开僻的BFC像是开僻了一个新的小宇宙,使这个块圾元素内部的排版完全独立隔绝.2.独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器

浅谈对BFC的认识，以及用bfc解决浮动问题

我们在前端的学习过程中常常会遇到BFC,用BFC来解决一些margin塌陷.margin合并清理浮动流的问题那么问题来了,我们所说的BFC到底是个什么东西呢: 什么是BFC BFC(Block Formatting Context)即“块级格式化上下文.我来简单的解读一下: 1.块级对应单词Block,不难想到的就是display中block属性,block属性是将此元素作为块级元素显示,根据块级元素的特性进行渲染,具体的特性下文再来细说. 2.格式化Formatting,格式化这个此相信不用

BFC,定位，浮动，7种垂直居中方法

目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z-index属性 2.6.菜单 2.7.:target伪类三.浮动 3.1.float取值 3.2.float的特性 3.3.清除浮动 3.3.1.清除外部浮动 3.3.2.清除内部浮动四.多种居中办法 4.1.块标签自身水平居中 4.2.块标签内对齐 4.3.垂直居中方法一 4.4.垂直居中方法

BFC之清除浮动篇&clear

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

完美解决浮动IE6 7中的兼容性BUG问题

想要创建出漂亮的网页设计,除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码,漂亮的设计就此就要完成了,却发现呈现出的效果压根不是你所期望的那样,漂亮的布局被破坏的体无完肤.更可气的是当你查找一遍代码中的错误时,却压根找不出来.这时候你就迫切需要了解一下IE6和它的那些同伙的坏脾气了,因为很可能它们就是罪魁祸首.到底IE6的那几个家伙们到底是如何搞乱你的设计的?咱们双该如何解决呢,别急,请听我慢慢道来:

BFC和清除浮动

1.清浮动(不考虑兼容的话这一项够用了): .clear:after{ content:''; display:block; clear:both; } 兼容ie6或7 加一个 .clear{ *zoom:1; //用来触发 haslayout(IE浏览器的BFC) } 2.BFC (一套渲染机制) 触发一个元素的BFC 相当于在这个元素里面建立起一堵围墙围墙里面的内容和围墙外面的内容不会产生干扰触发BFC的方式(以下任意一条就可以) 1.float的值不为none 2.overflo

如何解决浮动元素高度塌陷---CSS

解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:both; height:0; overflow:hidden; 缺点:在结构里增加了空标签,不利于代码可读性,且降低了浏览器性能: 方法三. 万能清除浮动法: 选择符: .clear:after{ content: ' ', clear: both; display:block; height:0; v

关于BFC

参考 http://www.html-js.com/article/1866(很棒! 还有栗子) http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html https://yimity.com/2013/05/10/bfc-block-formatting-contexts.html BFC针对相对定位 BFC 解决的问题: float高度塌陷 (父元素触发BFC) 父容器和第一个子元素顶部margin重叠

高度塌陷与BFC

高度塌陷的产生条件子元素浮动,脱离文档流子元素绝对定位或固定定位,脱离文档流定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷,本文主要讨论浮动产生塌陷的解决方法. 高度塌陷的解决方法 1.直接给父元素加高度 div{ border: 5px solid black; height: 200px; } p{ width: 200px; height: 200px; background-color: aqua; float: left; } 优点:代码简单,容易理解缺点:自适应性

浅入“Block Formatting Context”

本文主要是针对BFC特性的应用,至于什么是BFC,可以参看MDN的简介: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context 使用Block Formatting Context可以解决如下问题: (1)父元素的垂直外边距不会和子元素的垂直外边距重叠 (2)开启该特性的元素不会被浮动元素所覆盖 (3)开启该特性的父元素可以包含浮动的子元素 BFC的这个特性默认是不具有的,所

html+css基础知识

这是自己学习html时候做的一些记录,供大家参考 <!-- 块和内联块元素:独占一行的元素 div p h ul div没有任何语义,就是一个纯粹的快元素就是为了方便布局 span是内联元素(行内元素):只会占用自身大小的元素,不会占用一行常见的内联元素:a img iframe span span没有任何意义,可以设置样式块元素主要用来实现页面布局,内联元素主要选中文本设置样式一般情况下只是用块元素去包含内联元素,内联元素不去包含块元素 a元素可以包含任何元素,除去本身 p元素中不能

浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

浮动引发的高度塌陷问题高度塌陷问题的产生 BFC(Block Formatting Context)的引入元素开启BFC后的特点开启BFC的元素不会被其他浮动元素所覆盖开启BFC的元素不会发生父子元素外边距重叠开启BFC后可以包含浮动的子元素如何开启BFC 设置元素浮动将元素display属性设置为inline-block.table等 overflow属性设置为非visible值开启定位高度塌陷解决方法1: 父元素高度写死高度塌陷解决方法2: 为父元素也设置浮动高度塌陷解

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文.常规流(也称标准流.普通流)是一个文档在被显示时最常见的布局形态.一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用. BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系

CSS清浮动处理（Clear与BFC）

在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Clear float</title> <style type="text/css"&

CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z-index属性 2.6.菜单 2.7.:target伪类三.浮动 3.1.float取值 3.2.float的特性 3.3.清除浮动 3.3.1.清除外部浮动 3.3.2.清除内部浮动四.多种居中办法 4.1.块标签自身水平居中 4.2.块标签内对齐 4.3.垂直居中方法一 4.4.垂直居中方法

CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法

一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文.常规流(也称标准流.普通流)是一个文档在被显示时最常见的布局形态.一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用. BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系

CSS3与页面布局学习总结（三）——BFC、定位、浮动、垂直居中

一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文.常规流(也称标准流.普通流)是一个文档在被显示时最常见的布局形态.一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用. 1.2产生BFC的条件当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatti

浮动和BFC的学习整理转述

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 文档流的概念:html中block块元素默认是单独占据一行的,从上到下排列,也就是我们说的文档流; 脱离文档流的概念:A元素定义了float属性之后,就会"浮"起来,原来占据的空间由后面的B元素占据: 如果浮动起来的A元素和B元素发生重叠,浮动起来的A元素就会覆盖B元素: 浮动元素具有内联元素的特性,不在单独占据一行,相邻的浮动元素,最前面的具有left属性值的排在最左边,最前面的具有righ

（转载）CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z-index属性 2.6.菜单 2.7.:target伪类三.浮动 3.1.float取值 3.2.float的特性 3.3.清除浮动 3.3.1.清除外部浮动 3.3.2.清除内部浮动四.多种居中办法 4.1.块标签自身水平居中 4.2.块标签内对齐 4.3.垂直居中方法一 4.4.垂直居中方法

前端笔记之CSS（下）浮动&BFC&定位&Hack

一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/height+padding+border+margin) 块元素行内元素浮动流:产生?影响?如何解决? 定位流:静态定位(不定位) 相对定位绝对定位固定定位 JavaScript(JS): ECMAScript:语法 DOM: BOM: 1.2 浮动产生的背景? 背景:浮动产生的初衷是为了解决

css 清除浮动 & BFC

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 文档流的概念:html 中 block 块元素默认是单独占据一行的,从上到下排列,也就是我们说的文档流. 脱离文档流的概念:A 元素定义了 float 属性之后,就会"浮"起来,原来占据的空间由后面的 B 元素占据. 如果浮动起来的 A 元素和 B 元素发生重叠,浮动起来的 A 元素就会覆盖 B 元素. 浮动元素具有内联元素的特性,不在单独占据一行,相邻的浮动元素,最前面的具有 left 属性

为什么bfc可以解决浮动

热门专题