css浮动问题/css定位问题/css盒子模型/BFC原理详细剖析/css常用布局之flex布局grid布局table布局等—史上最全的css重难点整理笔记

发布时间：2023-08-17 11:00

前端css浮动问题

首先我们先来了解一下，css三种布局方式。本篇博客介绍的css浮动问题是传统布局的范围。想要完全掌握css浮动问题，先得了解一下什么是标准文档流，什么是块级元素和行内元素？它们都有什么特点？css为什么需要浮动？

Q1：什么是标准文档流？

A1：意思是元素在排版布局过程中，元素会默认自动从左往右，从上而下的流式排列方式。窗体自上而下分成一行行排列，并且在每一行中自左向右排列元素。要特别记住行内元素可以被包含在块级元素中，反之则不可以。

Q2：什么是标准文档流等级?

A2：我们开始在学css的元素的时候，都会接触到两大类元素分类，块级元素和行内元素。所以标准文档流的等级有两种，块级元素和行内元素。

Q3：什么是块级元素什么是行内元素？
A3：（1）块级元素：独占一行，不和其他的元素并列。能接受宽和高，如果不设置宽度，那么宽度将默认和父级一样宽度，是父级元素的100%。

（2）行内元素：和其他元素并列成为一行。不能这是宽和高，默认的宽度就是文字的宽度。

Q4：块级元素有哪些？行内元素又有哪些？

A4：块级元素有h1~h6，p，div等标签。行内元素span，a等等（这个可以自行记忆一下）

ps：写过一点点css代码都了解，块元素和行内元素可以转换的。以下是代码展示。

/*display的三个属性*/
/*
value:block 块元素
value:inline 行内元素
value:inline-block 既是块元素又是行内元素(常用)
*/

一个东西的出现肯定是有它的原因。我本人比较信奉萨特的存在主义。存在即合理，它肯定是出现来解决某一个或者某一类特定的问题，提供了什么功能。

在搞清楚为什么需要浮动的前提，我们需要先思考一个问题。如何把块级元素排列成一行？

我们刚开始再写css的时候，如果块级元素很小，但是它是块级元素霸道地占据了一行，就会造成页面空间资源，布局也不美观。css处理方式就是把display设置成inline-block。

写个代码，举个例子，会更有逻辑去解释清除这个东西。