BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有： html 根元素 float 浮动 绝对定位 overflow 不为 visiable display 为表格布局或者弹性布局 BFC 主要的作用是： 清除浮动 防止同一 BFC
清除浮动 让浮动的子元素撑开父级元素的高度 方案1 给父元素设置高度。（缺点：父元素高度无法自适应） 方案2 给父级元素开启BFC。浮动盒子的特点和定位盒子的特点：高宽都由内容撑开（缺点：ie6，ie7没有BFC，不起作用） overflow:hidden 定位 浮动 方案3 br标签的clea
常见的单列布局有两种： header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略窄的单列布局 实现第一种方式很简单，可以将 header , content, footer 统一设置相等宽度，然后设置 margin:auto 即可实现居中： .header{ margin:0 auto; max-width: 960px; heigh
目录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
目录一、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布局 1.float布局特性： 浏览器有水平排版和垂直排版两种方式，float布局采用水平排版方式，float取值只有left和right。 使用float布局会脱离标准流，元素使用float属性，其后面的元素会向上移动，被浮动与元素挡住。 在浮动流中，不能使用 margin：0 auto; 的方式实现
浮动的背景 开始为了web工程师，在网页上实现一些简单的布局。如文字环绕图片现象 浮动的属性 none：表示不浮动，默认值 left：左浮动 right：右浮动 inherit：继承父元素的浮动属性 1 文件环绕效果 文字环绕图片，可设置图片的浮动。 <!DOCTYPE html> <html> <head> <meta charset="
一、什么是BFC 是 Block Formatting Contexts 的缩写，名为“块级格式化上下文”。 是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。 二、BFC的特点 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器
更新一下以前的知识，虽然现在才学，但是为时不晚，而且这些东西还不得不学，挺经典的，就是不知道当初学基础的时候为什么没有学到这些东西 一.左右两列、一行三列、一行多列、多行多列布局 一行四列还有一行多列 首先统一配置需要装在一个盒子里面，让其有个宽高并居中 1.左右两列 一个行
浮动，很多布局标准流无法实现，需要用浮动脱标来完成。典型应用：让多个块元素一行显示。 设置浮动（float）的元素：脱标(脱离标准流变成行内块元素)，浮动到指定位置。原来占有的位置不保留。 一般是在标准流父盒子里摆浮动子盒子（类似table方式摆盒子，达到布局要求），此时父盒子宽高不会被子盒子
IE： 会压缩内容部分 达到设置padding和border 的时候不会增大盒子的宽高。 标准盒模型： 默认值：盒子的实际宽高会加上padding、border。 盒子的宽高只包含了content的内容部分。 box-sizing：border-box； 文档流： 概念： 文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建
浮动的特点 1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置 相当于从地面飘到了空中 2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素 3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动 4. 浮动元素有特殊的显示效果 一行可以显示多个 可以设置宽高
NO.1 溢出隐藏 NO.2 清除浮动 父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。 NO.3 解决高度塌陷 父级元素内部有子元素，如果给子元素添加margin-top样式
part 1：HTML html本身是一个很简单的语言，学习完众多标签以后，就可以开始简单的网页编写了，配合dreamweaver软件，使用起来更是事半功倍。这众多的标签大体上可分为三种：块状元素、内联元素和内联块状元素。这三种元素有其各自的特性，针对这些特性他们的应用场合也不同，如何熟练的使用这些
1、结构伪类选择器 2、伪元素 3、浮动 4、清除浮动
<!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
视觉格式化模型 盒模型：规定单个盒子的规则 视觉格式化模型（布局规则）：页面中的多个盒子的排列规则 视觉格式化模型，大体上将页面中盒子的排列分为三种方式： 常规流 浮动 定位 常规流布局 又称为 文档流、普通文档流、常规文档流 所有元素，默认情况下，都属于常规流布局 总体规则：块盒独占
<!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
BFC Blocking Fomatting Context 块格式化上下文 是Web页面的可视化CSS渲染的一部分，是浮动元素与其他原色交互的区域 ①BFC是一个独立的布局空间，BFC内部元素布局与外部互不影响 ②可通过一些条件触发BFC 触发条件: ①根元素html ②float不为none ③overflow不为visible ④d
方法1：增加标签clear:both 增加标签 <div style="clear: both;"></div> 方法2：增加标签 增加标签 <br clear="all" /> 方法3：父容器使用::after伪元素清除浮动 父容器div增加class="clearfix" 方法4：父容器overflow:hidden 或 父容器 auto（本质是用的bfc）什么是
高度塌陷与 BFC BFC： 全称:Block Formatting Content;是一个与上下文无关的独立的渲染区域；（块级格式化上下文） 是一种布局规则： 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的mar
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-Gig
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: '
