菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端基础第七天-范建荣-20230418 [打印本页]

作者: °荣 时间: 2023-4-18 22:30
标题: 前端基础第七天-范建荣-20230418
一、今天学习内容
传统网页布局的方式

标准流

所谓的标准流就是按照标签规定好的方式进行排列

块元素单独占一行，行内元素和行内块元素可以一行显示多个

浮动 (浮动的盒子会自动转化为行内块元素)

浮动的属性 float

Right 右浮

Left 左浮

None（没有浮动）

为什么需要浮动

有很多布局方式使用标准流无法完成，但是浮动可以解决，浮动可以改变元素的默认排列方式

网页布局规则：多个块元素纵向排列找标准流

多个元素要横向排列找浮动

浮动的特点：

浮动的盒子具有行内块元素的特点（一行可以显示多个，可以设置宽高）

浮动的元素会脱离标准流（脱标）

浮动的盒子不在占有原来标准流的位置

浮动的盒子无法压住图片和文字

网页布局的方式

先用标准流的盒子进行上下排列，内部的子元素采用浮动的方式进行左右排列

浮动的元素只会影响后面的标准流，对前面的标准流没有影响

理论上来说，只要一个盒子浮动了，其他的兄弟元素都要设置浮动

去除列表标签前面的点点：list-style：none

清除浮动：

为什么要清除浮动

由于父盒子在很多情况下不方便给高度，但是子盒子浮动起来又不占位置，最后父元素的高度会变成0，会影响后面标准流

清除浮动的方法

1额外标签法

会在浮动元素的末尾添加一个空标签，要求这个标签必须是块级元素

优点：书写简单

缺点：会添加很多没有意义的标签，结构比较差

2给父级添加overflow: hidden; (溢出切掉)

3给父元素添加单伪元素

4给父元素添加双伪元素

二、遇到的问题
三、解决方案

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)