首页 > TAG信息列表 > 浮动
第 39 题：介绍下 BFC 及其应用。
BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有： html 根元素 float 浮动 绝对定位 overflow 不为 visiable display 为表格布局或者弹性布局 BFC 主要的作用是： 清除浮动 防止同一 BFCcss 清除浮动
清除浮动 让浮动的子元素撑开父级元素的高度 方案1 给父元素设置高度。（缺点：父元素高度无法自适应） 方案2 给父级元素开启BFC。浮动盒子的特点和定位盒子的特点：高宽都由内容撑开（缺点：ie6，ie7没有BFC，不起作用） overflow:hidden 定位 浮动 方案3 br标签的cleacss的布局方式，常见的CSS布局类型
常见的单列布局有两种： header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略窄的单列布局 实现第一种方式很简单，可以将 header , content, footer 统一设置相等宽度，然后设置 margin:auto 即可实现居中： .header{ margin:0 auto; max-width: 960px; heigh【前端】第3回 CSS页面布局与JS简介
目录1. CSS盒子模型1.1 margin（外边距）2.浮动布局(float)2.1 float简介2.2 三种取值与clear2.3 解决浮动造成的父标签塌陷3.溢出属性(overflow)4. 定位4.1 static(静态)4.2 relative(相对定位)4.3 absolute(绝对定位)4.4 fixed(固定定位)5. z-index6. 页面练习7. JavaScript简介8. J前端开发3
目录一、CSS盒子模型1.margin外边距2.padding内填充二、浮动布局（float）1.浮动的特点2.浮动的三种取值3.clear属性4.清除浮动4.1.清除浮动主要的三种方式：4.2.伪元素清除法（使用较多）三、溢出属性（overflow）四、定位（position）1.static（静态）2.relative（相对定位）3.absolute（绝对定位）4.fixed（固定CSS-布局方式之Float布局
CSS-布局方式之Float布局 1.float布局特性： 浏览器有水平排版和垂直排版两种方式，float布局采用水平排版方式，float取值只有left和right。 使用float布局会脱离标准流，元素使用float属性，其后面的元素会向上移动，被浮动与元素挡住。 在浮动流中，不能使用 margin：0 auto; 的方式实现13 float属性（重点）
浮动的背景 开始为了web工程师，在网页上实现一些简单的布局。如文字环绕图片现象 浮动的属性 none：表示不浮动，默认值 left：左浮动 right：右浮动 inherit：继承父元素的浮动属性 1 文件环绕效果 文字环绕图片，可设置图片的浮动。 <!DOCTYPE html> <html> <head> <meta charset="一篇文章带你搞定BFC~
一、什么是BFC 是 Block Formatting Contexts 的缩写，名为“块级格式化上下文”。 是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。 二、BFC的特点 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器前端经典布局
更新一下以前的知识，虽然现在才学，但是为时不晚，而且这些东西还不得不学，挺经典的，就是不知道当初学基础的时候为什么没有学到这些东西 一.左右两列、一行三列、一行多列、多行多列布局 一行四列还有一行多列 首先统一配置需要装在一个盒子里面，让其有个宽高并居中 1.左右两列 一个行前端布局之标准流、浮动、定位
浮动，很多布局标准流无法实现，需要用浮动脱标来完成。典型应用：让多个块元素一行显示。 设置浮动（float）的元素：脱标(脱离标准流变成行内块元素)，浮动到指定位置。原来占有的位置不保留。 一般是在标准流父盒子里摆浮动子盒子（类似table方式摆盒子，达到布局要求），此时父盒子宽高不会被子盒子CSS：标准盒模型，浮动
IE： 会压缩内容部分 达到设置padding和border 的时候不会增大盒子的宽高。 标准盒模型： 默认值：盒子的实际宽高会加上padding、border。 盒子的宽高只包含了content的内容部分。 box-sizing：border-box； 文档流： 概念： 文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建浮动
浮动的特点 1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置 相当于从地面飘到了空中 2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素 3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动 4. 浮动元素有特殊的显示效果 一行可以显示多个 可以设置宽高overflow：hidden 的三个作用
NO.1 溢出隐藏 NO.2 清除浮动 父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。 NO.3 解决高度塌陷 父级元素内部有子元素，如果给子元素添加margin-top样式HTML & CSS 学习笔记
part 1：HTML html本身是一个很简单的语言，学习完众多标签以后，就可以开始简单的网页编写了，配合dreamweaver软件，使用起来更是事半功倍。这众多的标签大体上可分为三种：块状元素、内联元素和内联块状元素。这三种元素有其各自的特性，针对这些特性他们的应用场合也不同，如何熟练的使用这些css-浮动
1、结构伪类选择器 2、伪元素 3、浮动 4、清除浮动02.浮动的其他的特点1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d视觉格式化模型
视觉格式化模型 盒模型：规定单个盒子的规则 视觉格式化模型（布局规则）：页面中的多个盒子的排列规则 视觉格式化模型，大体上将页面中盒子的排列分为三种方式： 常规流 浮动 定位 常规流布局 又称为 文档流、普通文档流、常规文档流 所有元素，默认情况下，都属于常规流布局 总体规则：块盒独占02.浮动的其他的特点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dBFC块级格式化上下文
BFC Blocking Fomatting Context 块格式化上下文 是Web页面的可视化CSS渲染的一部分，是浮动元素与其他原色交互的区域 ①BFC是一个独立的布局空间，BFC内部元素布局与外部互不影响 ②可通过一些条件触发BFC 触发条件: ①根元素html ②float不为none ③overflow不为visible ④d清除浮动的方法（6种）
方法1：增加标签clear:both 增加标签 <div style="clear: both;"></div> 方法2：增加标签 增加标签 <br clear="all" /> 方法3：父容器使用::after伪元素清除浮动 父容器div增加class="clearfix" 方法4：父容器overflow:hidden 或 父容器 auto（本质是用的bfc）什么是【Web前端HTML5&CSS3】08- 高度塌陷与BFC
高度塌陷与 BFC BFC： 全称:Block Formatting Content;是一个与上下文无关的独立的渲染区域；（块级格式化上下文） 是一种布局规则： 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的marcss 清除浮动
1. 父元素：overflow:hidden2. 给兄弟元素加一个clear：both3.用伪类清除浮动时用after，并且加上content：""可以加内容也可以不加，但是一定要加上display：block；同时还要写clear：both；css代码：#div1:after{content:"";clear: both;display: block;} 工作中如果有您解决不了的问题或者您花浮动静态路由
1、设置AR-LT和AR-YD路由器的环回口地址 int LoopBack0 ip address 123.1.1.1 24 2、配置接口ip [AR-GW]int g0/0/0 [AR-GW-GigabitEthernet0/0/0]ip address 56.1.1.1 24 [AR-GW]int g0/0/1 [AR-GW-GigabitEthernet0/0/1]ip address 57.1.1.1 24 [AR-LT]int g0/0/0 [AR-LT-Gigcss浮动
css浮动会使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止 浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响 如果彼此相邻的元素均设置了浮动属性，如果有空间的话，它们将彼此相邻 浮动由float属性定义：float:left/right/inherit 清除浮动伪元素选择器、字体、文字、背景、边框、浮动
伪元素选择器 """通过css操作文本内容""" 1./*修改首个字体样式*/ p:first-letter { color: greenyellow; font-size: 48px; } 2./*在文本开头添加内容*/ p:before { content: '开头添加'; color: aqua; } 3./*在文本结尾添加内容*/ p:after { content: '