float浮动的块状元素编写的先后顺序对页面布局的影响

最新推荐文章于 2024-05-12 22:02:08 发布
最新推荐文章于 2024-05-12 22:02:08 发布
阅读量4.2k 收藏 6
点赞数 3
分类专栏： CSS 文章标签： 布局 三栏 浮动 文本流
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tongmengLydia/article/details/51035644
版权
在创建三栏布局时，发现浮动元素的编写顺序影响了实际布局效果。通过Chrome浏览器F12查看，了解到浮动元素脱离文本流，未浮动元素会按顺序占据空间。调整元素顺序可以实现理想布局，帮助理解float属性的工作原理。
摘要由CSDN通过智能技术生成

在做一些练习题时发现一个初学者经常犯的一些错误：对浮动和定位都很理解，知道怎么使用，但是一旦做东西的时候，为什么编写出来的效果不是自己想象中的样子？

例如：我想做一个三栏布局的页面，理想效果如下图：


编写代码如下：



满心欢喜的

最低0.47元/天 解锁文章
Lydia_zero
关注
专栏目录
关于float浮动的块级元素在编写html时先后顺序对布局的影响
曾大大的博客
03-24 5998
闲来没事，在做2016年百度前端技术学院，任务三：三栏式布局 看了下任务需求： 感觉 so easy，于是立马动手写了！ html部分 css部分 结果一看： 刚看到这个结果时感觉脸都绿了，然后调出css仔细看哪里写错了： 找了半天也没看出css哪里写的不对，之后我又看了下学院里面其他同学
float元素先后顺序
韩旭不会敲代码吧的博客
08-06 346
在练习经典左中右三列布局，左右固定宽度，中间撑开自适应中遇到的小问题 本来想效果是这种： 写完代码如下： <style> .container { height: 200px; } .container div { height: 100px; } .left { float: left; width: 500px; background: red; } .center { background: green; }
css float对于之后布局的影响
weixin_34061042的博客
03-21 163
后面的元素不浮动，即便设置了宽度，表面上只占了一定的宽度，但实际上占了全屏。(所以设置了overflow之后，并且之后的div设置了宽度，再设置margin-left可能不起作用)。 高度对浮动的影响 如果要实现类似九宫格那种效果，则他们的高度必须保持一致，否则会占用下一格的位置。 转载于:https://www.cnblogs.com/zuoxiaobing/p/3614190.htm...
float属性影响后续元素排版问题
(.*?)的博客
01-27 188
解决方案： 在后续块级元素中设置clear:both属性 #content { clear: both; }
关于三栏布局中浮动布局div块的先后顺序
wpbfj的博客
03-15 1605
常用的三栏布局中，用的较多的浮动布局，会因为div块的先后顺序而产生不同的效果。 这种情况下，一般左右两栏div需要在中间栏之前。这样，才能让左右两个边栏浮动到它们应该的位置上，以此来使得中栏能够进入中间的空间，并自适应布局。若是浏览器在一个或者两个边栏div之前发现中栏，那么中栏会先占据一侧或者两侧位置，这样浮动的部分就会跑到中栏的下面。 如下： 上理前端分队
HTML+CSS布局、规范、兼容
08-07
流动模型是默认的布局方式，块状元素垂直排列，内联元素水平排列。浮动模型让块级元素能够在一行上展示，常常用于创建多栏布局。层模型则允许块级元素进行层叠显示，可用于实现覆盖和重叠效果。在CSS布局时，还应...
DIV+CSS布局心得
wxy201008的博客
01-30 1554
DIV+CSS布局心得 文章目录DIV+CSS布局心得1，清空所有原有样式2，分析页面布局DIV+CSS布局页面页面常用HTML标签CSS常用选择器CSS常用属性DIV布局浮动定位position定位z-index堆叠顺序display属性设置半透明度盒子模型内边框（padding）外边框 （margin）边界（border）怪异盒居中方式圆角边框阴影 1，清空所有原有样式 body,img,u...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6510
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
web常见的五种前端布局方式
qf2019的博客
04-13 2611
web大前端布局 常用的布局 常用的布局一般分为一下几大类： 文档布局（text） 文档流本质是 nomal flow （普通流、常规流） 元素在文档中的特点 块级元素，和内联元素。 块级元素：是自带有这行效果，在文档中独占一行的效果，块状元素会自上而下的排列且在默认宽度是父元素的100%而高度默认被内容撑开。 内联元素：内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。在文档流中，内联元素的宽度和高度默认都被内容撑开。 什么是文档流（文档
块级元素堆叠顺序
qy88666的博客
08-03 535
详情请见：z-index 属性
css float的代码顺序和html页面显示顺序的问题
萧逸才的博客
05-14 2588
这其实不什么大problem，但是不注意的话也是不小的麻烦，so…… 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .div-right{ margin:0px; padding: 0px; height: 100px; wi
CSS学习（三）—— 浮动与定位
qq_43848400的博客
02-28 1773
六、浮动与定位 1、浮动 1）浮动基本概念 浮动最本质的功能：用来实现并排 浮动使用要点：如若要浮动，并排的盒子都要设置浮动；父盒子要有足够宽度，否则盒子会掉下去 浮动的顺序贴靠特性：子盒子会按照顺序进行贴靠，如果没有足够空间，则会再寻找前一个兄弟元素 浮动元素不再区分块级元素、行内元素，已经脱离了标准文档流，一定能设置宽高，即使他是span或者a标签 float:left; 左浮动，浮动元素统一按顺序向左靠 float:right; 右浮动，浮动元素统一按顺序向右靠 2）浮动实现网页布局 注意事项： ①垂
CSS属性float详解
htcvive的博客
02-26 277
CSS属性float详解
三栏布局的实现方式，尽可能多写
Vevean2545116309的博客
10-07 264
1. float浮动布局 注意：！！！浮动布局时，三个div的生成顺序对布局有影响。 应该先生成左浮和右浮的两个元素1和3，再生成中间content2元素；原因是：若生成顺序为123或者213，则2元素会先占位，float元素只能紧贴其后；但若生成顺序为132，1和3两个浮动元素会脱离浮动流，2元素生成后，1和3会覆盖2。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
最通俗易懂的浮动（float）布局原理
weixin_44456333的博客
03-21 6237
最通俗易懂的浮动（float）布局原理（图文解释） 声明：本文部分原理总结借鉴该大神。原地址为：https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 写在前面的话： 1、对于很多刚接触Css的朋友来说对float浮动布局有时候处于一个很模糊的概念 对于很多刚接触Css的朋友来说对float浮动布局有时候处于一个很模糊的概念 ...
CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）
qq_47443027的博客
04-22 2190
1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置 2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认） 4.浮动的影响： 对附近的元素布局造成改变，使得布局混乱 浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级
CSS中的Float（浮动）
GZM888888的博客
05-05 1829
Float是CSS中的一种布局方式，它允许元素脱离正常的文档流，并向左或向右浮动。Float属性最初是为了实现文字环绕图片的效果而设计的，但现在已经被广泛应用于网页布局中。
CSS浮动（float）是什么、为什么、浮动特性、应用举例
最新发布
atatsuki的博客
05-12 1124
什么是浮动.left,.right {/* 层叠性 */.right {左青龙
CSS浮动属性详解：float属性与页面布局
例如，后续的非浮动块级元素会尝试填补这个浮动元素留下的空间，而内联元素则会在不影响浮动元素的情况下尽可能地与其并排。 `float`属性有四个可能的值： 1. `left`：元素向左浮动。这会导致元素向左移动，直到它...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值