关于float浮动的块级元素在编写html时先后顺序对布局的影响

最新推荐文章于 2021-08-06 08:25:47 发布
最新推荐文章于 2021-08-06 08:25:47 发布
阅读量5.9k 收藏 6
点赞数 1
分类专栏： css篇 文章标签： html css 前端开发 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gg654304469/article/details/65638723
版权
在创建三栏式布局时，发现原本应该右侧浮动的元素出现在了下方。通过Chrome开发者工具调试，发现是中间元素的margin-right导致的问题。调整HTML中浮动元素的顺序，将中间元素和右侧元素的顺序交换，解决了布局问题。文章探讨了float与position: absolute在文档流中的区别，并解释了为何改变元素顺序能修复布局。
摘要由CSDN通过智能技术生成

闲来没事，在做2016年百度前端技术学院，任务三：三栏式布局


看了下任务需求：


0000000


感觉 so easy，于是立马动手写了！

html部分



css部分

最低0.47元/天 解锁文章
曾大大
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
position替代部分float进行网页元素定位
09-25
1. 有人说耗性能：关于这一点，目前并没有官方的明确说明，但在某些极端复杂的布局中，可能会对浏览器性能造成影响。 2. 经常出现bug：这主要看开发者的经验，因为浮动和定位的组合使用不当，可能会导致布局错乱，...
html--css排版--float（浮动排版）：块级元素（占据父容器的一整行）在一行中显示、文字围绕图片进行摆放、父元素高度塌陷的问题（ 浮动元素的清除 属性 clear＜伪元素、标签的使用＞）1
weixin_47295886的博客
07-12 1563
html--css排版--float（浮动排版）：块级元素（占据父容器的一整行）在一行中显示、文字围绕图片进行摆放、父元素高度塌陷的问题（ 浮动元素的清除 属性 clear）1
html调整div上下顺序,用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose
weixin_39604092的博客
06-04 266
先看代码 #formpanel{width:341px;height:135px;margin-left:auto;margin-right:auto;}#username_field{margin-top:0px;width:340px;}#usernamepic{float:left;margin-top:0px;margin-left:0px;...
float元素先后顺序
韩旭不会敲代码吧的博客
08-06 334
在练习经典左中右三列布局，左右固定宽度，中间撑开自适应中遇到的小问题 本来想效果是这种： 写完代码如下： <style> .container { height: 200px; } .container div { height: 100px; } .left { float: left; width: 500px; background: red; } .center { background: green; }
float浮动的块状元素编写的先后顺序对页面布局的影响
Lydia_zero的专栏
04-01 4187
在做一些练习题时发现一个初学者经常犯的一些错误：对浮动和定位都很理解，知道怎么使用，但是一旦做东西的时候，为什么编写出来的效果不是自己想象中的样子？ 例如：我想做一个三栏布局的页面，如图。
css float的代码顺序和html页面显示顺序的问题
萧逸才的博客
05-14 2562
这其实不什么大problem，但是不注意的话也是不小的麻烦，so…… 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .div-right{ margin:0px; padding: 0px; height: 100px; wi
css元素布局的相关知识和代码.zip
12-14
这个压缩包“css元素布局的相关知识和代码.zip”显然是一个关于CSS布局的学习资源，包含了各种布局模式的理论解释和实践代码。让我们详细探讨一下其中涵盖的主题： 1. **文档流**：这是CSS布局的基础，指的是元素在...
CSS3定位和浮动详解
09-24
在编写CSS代码时，除了属性值设置之外，还需要注意属性的书写顺序，因为这可能影响浏览器的渲染效率。例如，先设置定位相关的属性（position、top、left、z-index等），接着是布局相关的属性（width、height、...
css1.rar_DIV css布局
09-23
Div元素，全称为“division”，在HTML中被用来组织和分隔内容，它是块级元素，可以容纳文本、图像或其他HTML元素。通过CSS，我们可以为Div设置宽度、高度、边距、填充等属性，使其按照我们的需求进行布局。Div+CSS...
CSS的浮动
yangnuowei88的专栏
09-02 1311
CSS浮动 浮动和绝对定位一样，都让那个元素脱离了原始的文件流（由于浮动后，那些浮动的div不占用空间，最后的一个div就会窜，你这个时候就要清楚浮动）！     【转】 可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。 注意，以上这些理论，是指标准流中的div。无论多么复杂的布局，其基本出发点
【CSS】display、position、float 三者的优先级
Dora_5537的博客
08-29 1609
1. display 的值是 none 如果 display 的值是 none，则 position 和 float 无效。否则，继续进行2。 2. position的值是 absolute或 fixed 如果 position的值是 absolute或 fixed，则浮动失效，并且 display 的值 按照 对应表 设置。否则，继续进行3。 此时，元素的位置将由 ‘top’，’...
css float语句先后顺序影响表达效果
weixin_45232028的博客
11-14 287
浮动之块级元素，内联元素
qq_43411412的博客
06-04 607
块级元素 顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的div、p、ul默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，宽度始终是与浏览器宽度一样，块级元素之所以会单独占据一行是因为它们前后默认有换行符（看不到）。它可以容纳内联元素和其他块元素。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的，float也具有此功能，设置float后，就不用再display:block;了，浮动后元素自动就拥有了块元素的属性了
float属性使用后导致元素错位或塌陷的原因及解决方案
qq_36996271的博客
08-23 8195
CSS使用float属性（float）导致塌陷的原因及解决方案（清除浮动） 正常的文档流。 使用了float会怎么样？ 正常的文档流 我们先来看一下不使用float属性的文档布局是怎么样的。 块级元素： 对应的代码： &amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;html lang=
HTML5+CSS3快速入门浮动，高度塌陷，伪元素清除浮动每日一篇day05
m0_47268176的博客
11-20 263
teacherDay05 布局第二大块 盒模型 行内块 行内块并排缺点： 中间有间距 文本内容行数 多少不一样的时候 会出现对不齐现象 浮动属性 作用： 专业解决并排 float: left左侧浮动/right右侧浮动/none不浮动; float:none;默认值 标准状态 标准流 浏览器解析块元素从上到下一行一个 垂直排列 行内元素并排 中间有间距 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WJ6qK6UR-1605867640024)(media/
实现HTML页面元素从上往下，从左往右排序
热门推荐
java的涟漪
08-06 1万+
从上往下，从左往右 html,body{ margin:0; border:0; padding:0; width:100%; height:100%; } .parent{ display:block; background:gray; width:100%; height:100%; } .parent{ -webkit-column-width:68px; -moz-col
html中float浮动中父元素需要加什么
最新发布
06-06
在 HTML 中，当子元素使用了 float 属性进行浮动时，父元素需要添加 clearfix 清除浮动。这是因为浮动元素会脱离文档流，导致父元素无法正常计算高度，从而影响布局。通过在父元素上添加 clearfix，可以让父元素重新获得高度，从而避免布局上的问题。可以使用以下 CSS 代码来定义 clearfix： ``` .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; } ``` 然后在父元素的 class 属性中添加 clearfix 即可，例如： ``` <div class="clearfix"> <div class="float-left">浮动元素1</div> <div class="float-left">浮动元素2</div> </div> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值