前端基础六天HTML+CSS：流、浮动与Flex布局详解.pptxVIP

CSS第四天复习强化、标准流、浮动、Flex布局

复习强化0

复习强化盒子模型强化盒子模型 h1h2inputinputbutton

复习强化盒子模型强化盒子模型 h2ul

标准流1

标准流标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。 浮动（了解） Flex布局

浮动2

浮动作用：让块元素水平排列。属性名：float属性值left：左对齐right：右对齐特点：浮动后的盒子顶对齐浮动后的盒子具备行内块特点浮动后的盒子脱标，不占用标准流的位置

浮动后的盒子有什么特点？顶对齐具备行内块特点脱标

浮动–产品区域布局

清除浮动场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）解决方法：清除浮动（清除浮动带来的影响）

清除浮动方法一：额外标签法在父元素内容的最后添加一个块级元素，设置CSS属性clear:both方法二：单伪元素法方法四：overflow父元素添加CSS属性overflow:hidden.clearfix::after{?content:;?display:block;?clear:both;}方法三：双伪元素法（推荐）.clearfix::before,.clearfix::afte