当前位置: article > 正文

css4浮动+清除浮动

作者：小蓝xlanll | 2024-02-27 02:04:45

赞

踩

css4浮动+清除浮动

浮动

一.常见网页布局
- 1.三种布局方式
- 2.布局准则
二.浮动（float）
三.清除浮动

一.常见网页布局

1.三种布局方式

标准流/普通流/文档流
浮动
定位

2.布局准则

在这里插入图片描述

二.浮动（float）

1.好处

普通流盒子中间默认有空隙且不知道空隙大小，有些布局普通流做不到，浮动可以方便控制盒子间的空隙

2.概念

在这里插入图片描述

3.三大特性

（1）脱标
在这里插入图片描述
（2）一行内显示且顶端对齐

（3）具有行内块特征

4.使用

在这里插入图片描述

5.常见网页布局模板

在这里插入图片描述

6.注意点

在这里插入图片描述

三.清除浮动

1.why

在这里插入图片描述

2.本质

在这里插入图片描述

3.语法

在这里插入图片描述

应用
在这里插入图片描述

4.四种way（后三个都是给父级添加）

（1）额外标签法（空标签必须是块级元素）
在这里插入图片描述

（2）overflow

在这里插入图片描述

（3）：after伪元素发（复制调用）
在这里插入图片描述

（4）双伪元素（复制调用）
在这里插入图片描述

清除浮动总结

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/149176

推荐阅读

相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

闽ICP备14008679号