018CSS-三种传统布局方式（普通、浮动）

最新推荐文章于 2023-02-08 10:53:47 发布

教练我真的想敲代码

最新推荐文章于 2023-02-08 10:53:47 发布

阅读量185

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Gy_9543/article/details/107508062

版权

css 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

所为标准流就是按照规定好默认方式排列块、行内

网页布局第一准则，多个块级元素纵向排列找标准流。多个块级元素横向排列找浮动

浮动最重要的元素特性

1、脱离标准普通流的控制移动到指定位置（俗称脱标）
2、浮动的盒子不在保留原先的位置

任何元素都可以浮动不管原先是什么模式的元素，添加浮动之后具有行内快元素相似的特性
如果块级盒子没有设置宽度，默认和父级一样宽。但是添加浮动后，它的大小根据内容来决定 
浮动的盒子中间是没有缝隙的，是紧挨着一起的  
行内元素同理

为了约束浮动元素位置我们网页布局一般采取=》先用标准刘的父元素排列上下位置，之后内部资源苏采用浮动排列左右位置，复合网页布局第一准则

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

教练我真的想敲代码

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS传统布局-浮动float

weixin_41018693的博客

01-25

409

前言 css传统的布局方式分为三种，注意这里说的是传统布局，不包括flex布局和grid布局等。 1.普通流普通流也称标准流，既标签按照规定好的默认方式排列，是最基本的布局方式这些标签也是我们学习前端过程中比较基础的标签，分为两类 1.块级元素，特点：独占一行，从上向下顺序排列，常用的标签为div、hr、a、p、h1~h6、table、form等 2.行内标签，特点：相邻行内元素在一行上，一行可以显示多个，从左到右排列，碰到父元素边缘则自动换行 2.浮动 --我们今天要分享的 3.定位 --后面会再分

传统布局方式二---浮动，以及清除浮动的方法

zzyaiaad的博客

05-05

159

一、浮动（float）的定义使元素脱离文档流、按照指定方向发生移动，遇到父级元素或者相邻的浮动元素停了下来。文档流：文档流是文档中可显示对象在排列时所占用的位置。 float 的属性值为left、right、none 二、浮动的特性浮动元素会脱离标准流(脱标) 浮动的盒子不再保留原先的位置浮动的元素会一行内显示并且元素顶部对齐浮动的元素会具有行内块元素的特性三、为什么要清除浮动...

参与评论您还未登录，请先登录后发表或查看评论

CSS基础-清除浮动-李南江

weixin_34050389的博客

11-07

118

配套视频下载地址清除浮动盒子高度问题在标准流中内容的高度可以撑起盒子的高度<style> div{ background-color:red; } p{ width:200px; height:100px; ba...

css传统布局

努力的zhiyi

04-20

1139

1、position. 1)position:relative; 相对定位. 以自己所在位置为参考点. 自己所在位置为 top:0; left:0;

前端学习总结——CSS布局方式之传统布局

星曦的博客

11-27

446

前端学习总结——CSS布局方式之传统布局传统布局即是早期在平板电脑、智能手机等移动设备并不流行的时候使用的布局方式。一、表格布局例如：采用表格方式实现如下简单模型的布局（1）固定布局即用具体的像素值来确定模型的宽和高等值。HTML代码如下所示<table border="0"> <tr> <td colspan="2" class="header">header</td>

详解CSS中的传统网页布局的三种方式 CSS浮动

乐逍遥

08-21

480

传统网页布局的三种方式标准流(普通流/文档流)：按照默认的方式排列浮动流定位流 CSS浮动浮动可以改变元素标签的默认排列方式网页布局第一准则：多个块级元素横向排列标准流，多个块级元素纵向排列浮动流浮动详解 float属性创建浮动框，使其移动到一边，直到左边缘或右边缘碰到另一个浮动框的边缘或父元素边缘代码示例： float: none | left | right; 1 值描述 none 元素不浮动(默认值) lef

保安日记：前端学习第五篇之CSS浮动

Zhuo_De的博客

09-24

434

前端第五天传统网页布局的三种方式 1.标准流 2.浮动 3.定位标准流（普通流/文档流）按照规定好默认方式排列 1.块级元素会独占一行，从上向下顺序排列。常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table 2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素: span、a、i、em等浮动(float) 原理：float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。浮动可以改变元素标签默认的排列

3.3CSS 内容总结(三)浮动.md

02-16

在探讨浮动之前，我们首先了解下传统的网页布局方式，主要包括以下三种： 1. **普通流（标准流）**： - **块级元素**：如`div`、`hr`、`p`、`h1`至`h6`、`ul`、`ol`、`dl`、`form`、`table`等。这些元素默认独占一...

CSS笔记(二) - 页面布局盒子模型

最新发布

JUN_7777的博客

02-08

2281

行内元素

CSS 4 浮动常用网页布局清除浮动 PS 学成在线案例

weixin_62302666的博客

02-14

1011

目录 1.浮动 1.1传统网页布局的三种方式 1.2标准流（普通流/文档流） 1.3为什么需要浮动？ 1.4浮动特性（重要） 1.4.1浮动元素会脱离标准流 1.4.2浮动的元素会一行内显示并且元素顶部对齐 1.4.3浮动的元素会有行内块元素的特性 1.5浮动元素经常和父级搭配使用 1.6综合案例 2.常用网页布局 2.1常见网页布局 2.2浮动布局注意点 3.清除浮动 3.1为什么要清除浮动 3.2清除浮动本质 3.3清除浮动 3.3清除浮动方法 3....

5种布局方式

weixin_30458043的博客

08-06

695

一、静态布局（static layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 2、设计方法 PC：居中...

常见五大CSS 布局方式总结

tzllxya的博客

06-24

7858

常见五大CSS 布局方式总结之所以总结是因为最近也是在看css方面，让我迷惑的是有很多文章关于布局名词都没有听说过，工作中也很少用。但是我们要与时俱进，叫的多了，它就成为正式名词了。比如 '双飞翼 '圣杯’？？并且我还发现我几乎看了好多文章，他们在从大的角度总结时候，几乎很少有相同，分类角度不尽相同。其实这也没关系，本来就没有一个统一标准，但是还是希望有个相对能够理解概括角度看c...

CSS 传统网页布局三种方式（PC端）※

chengyu0726的博客

05-12

871

待整理

传统网页布局的三种方式

qq_46405281的博客

08-03

1616

标准流、浮动、定位

传统的页面的布局方式一普通流（标准流）

zzyaiaad的博客

05-05

373

所谓的普通流 (normal flow)：就是元素按照其在HTML中的先后顺序至上而下布局。 1、块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 2、行内元素水平排列，直到当行被占满然后换行常用元素：span、a、i、em 等 ...

CSS中的三种基本的定位机制（普通流、定位、浮动）

热门推荐

chelen_jak的专栏

12-16

1万+

一、普通流　　普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。　　普通流就是html文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档中的先后次序依次显示。是块级元素就占一行或多行，是行内元素就和其他元素共处一行，没什么好说的，该咋显示咋显示，一个萝卜一个坑。二

CSS学习（六）

weixin_45463877的博客

02-29

636

定位为什么需要定位？提问: 以下情况使用标准流或者浮动能实现吗? 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。当我们滚动窗口的时候，盒子是固定屏幕某个位置的。以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以: 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以...

CSS(PC端)传统页面布局三种方式

qq_60602244的博客

09-02

1719

目录CSS(PC端)传统页面布局三种方式一、标准流（文档流）二、浮动1.语法2.属性3.浮动特性4.清楚浮动三、定位1.静态定位（了解）2.相对定位3.绝对定位4.固定定位5.粘性定位6.定位拓展（1）子绝父相（2）定位叠放次序（3）固定在版心右侧位置技巧（4）绝对定位的盒子居中（5）脱标的盒子不会触发外边距塌陷（6）行内元素添加绝对定位或固定定位，可以直接设高和宽（7）块级元素添加绝对定位或相对定位，如果未设宽高，默认内容大小（8）注意 CSS(PC端)传统页面布局三种方式一、标准流（文档流）标签按

flex布局+display:flex布局，自动适应屏幕高度100%

Gy_9543的博客

09-02

2770

子项属性

CSS布局技巧：浮动、自适应与表格属性解析

接下来，文件提到了CSS的三种基本定位机制：普通流、浮动流和定位流。普通流是默认的布局方式，元素按照从上到下的顺序排列。浮动流通过`float`属性实现，常见的是`float:left`和`float:right`，使得元素向左或向右...

018CSS-三种传统布局方式（普通、浮动）

所为标准流就是按照规定好默认方式排列 块、行内

网页布局第一准则，多个块级元素纵向排列找标准流。多个块级元素横向排列找浮动

浮动最重要的元素特性

所为标准流就是按照规定好默认方式排列块、行内