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

最新推荐文章于 2022-08-19 14:16:09 发布
VIP文章 最新推荐文章于 2022-08-19 14:16:09 发布
阅读量5.9k 收藏 6
点赞数 1
分类专栏： css篇 文章标签： html css 前端开发 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gg654304469/article/details/65638723
版权

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


看了下任务需求：


0000000


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

html部分



css部分

最低0.47元/天 解锁文章
曾大大
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html--css排版--float（浮动排版）：块级元素（占据父容器的一整行）在一行中显示、文字围绕图片进行摆放、父元素高度塌陷的问题（ 浮动元素的清除 属性 clear＜伪元素、标签的使用＞）1
weixin_47295886的博客
07-12 1394
html--css排版--float（浮动排版）：块级元素（占据父容器的一整行）在一行中显示、文字围绕图片进行摆放、父元素高度塌陷的问题（ 浮动元素的清除 属性 clear）1
html调整div上下顺序,用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose
weixin_39604092的博客
06-04 236
先看代码 #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;...
浮动及影响及其解决方法
LL_bianma的博客
03-05 808
帮助你快速学习浮动，解决浮动
float元素先后顺序
韩旭不会敲代码吧的博客
08-06 309
在练习经典左中右三列布局，左右固定宽度，中间撑开自适应中遇到的小问题 本来想效果是这种： 写完代码如下： <style> .container { height: 200px; } .container div { height: 100px; } .left { float: left; width: 500px; background: red; } .center { background: green; }
HTML中的元素浮动
qq_48643318的博客
08-19 1026
浮动 元素浮动 float left right none 脱离文档流
IE7 float:right 右浮动时元素换行错位的bug解决方法
09-25
次的情况与上次不同，上次直接将浮动的元素移到不浮动的元素之前就可以解决问题，而这次的float:right 时元素换行错位的情况，在下文也给出了不错的解决方法
div三栏布局左中右通过float浮动来设置
01-19
下面代码构造div分为3烂，左中右，主要通过float浮动来设置，side靠左浮动，side1靠右浮动，main自动适应调整自身宽度。 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
详解关于浮动元素float使其父元素高度塌陷的原因及解决方法
11-21
浮动元素使其父元素高度塌陷我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框...
html/css中float浮动的用法实例详解
11-21
1、当元素的float属性取值为left或right时，元素属于浮动定位; 2、若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动； 3、浮动盒子的顶边不得高于上一个盒子
HTML基础知识（四）——浮动
weixin_48683052的博客
09-10 3985
一、浮动布局 （一）功能 1、布局方向：（1）垂直方向（2）水平方向 水平方向受限，需要设置宽度； 在水平方向布局的时候出现两个问题：间隙问题（font-size：0）和行对齐问题（vertical-align）。 2、浮动布局可以让水平排列变简单，浮动的初衷是用来解决文字环绕; *原来代码：需要设置display：inline-align转换类型和给父元素设置font-sise：0px，然后给子元素恢复字体大小和对...
浮动的特点
m0_70552412的博客
06-01 686
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开， 如果希望块元素在页面中水平排列，可以使块元素脱离文档流 使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流 可选值： none，默认值，元素默认在文档流中排列 left，，向页面的左侧浮动 right，向页面的右侧浮动 浮动的特点 1:浮动元素会脱离文
初识HTML(三)---div块级元素以及浮动和定位(超详细带演示)
热门推荐
代码哈士奇的博客
11-06 1万+
div块级元素 div是一个特别重要的标签 是块级元素 上代码，看图！ 手册 <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="width: 600px;height: 600px;background-color: black;"> <div style="width: 5
浮动和定位
tian_to_tian的博客
08-19 122
浮动 float:none|left|right 文档流：网页中元素排列顺序。 标准文档流（默认）：从上到下，从左到右 浮动流：左浮动：从左到右，右浮动：从右到左。从上到下 浮动原理： 1、浮动元素将脱离标准文档流 2、浮动元素不会遮挡行内元素 3、浮动元素变成行内块级元素，浮动元素后面的元素会依次向上填充 不允许浮动元素覆盖文字 浮动带来的问题：父盒子塌陷 如何解决父盒子塌陷（扩展盒子高度/清除浮动的影响） 1、设置盒子高度 2、overflow：hidden ...
html元素设置浮动,html浮动元素
weixin_39975261的博客
06-21 740
1. position:static所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。一般来说，不用指定position:static，除非想要覆盖之前设置的定位。#div-1 {position:static;} 2. position:relative如果设定position:relative，就可以使用top,bottom,le...
浮动
じ☆ve暧メ晴的博客
11-05 710
浮动(float) 普通流(normal flow) 这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。 前面我们说过，网页布局的核心，就是用 CSS 来摆放盒子位置。如何把盒子摆放到合适的位置？ CSS 的定位机制有 3 种：普通流（标准流）、浮动和定位。 html 语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常...
css float的代码顺序和html页面显示顺序的问题
萧逸才的博客
05-14 2534
这其实不什么大problem，但是不注意的话也是不小的麻烦，so…… 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .div-right{ margin:0px; padding: 0px; height: 100px; wi
关于三栏布局中浮动布局div块的先后顺序
wpbfj的博客
03-15 1567
常用的三栏布局中，用的较多的浮动布局，会因为div块的先后顺序而产生不同的效果。 这种情况下，一般左右两栏div需要在中间栏之前。这样，才能让左右两个边栏浮动到它们应该的位置上，以此来使得中栏能够进入中间的空间，并自适应布局。若是浏览器在一个或者两个边栏div之前发现中栏，那么中栏会先占据一侧或者两侧位置，这样浮动的部分就会跑到中栏的下面。 如下： 上理前端分队
浮动元素排列规则
space_walk的博客
10-11 2198
浮动元素排列规则
块级元素与内联元素（行内元素）及浮动知识总结
Paranoidyang的博客
01-19 4764
块级元素 顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的div、p、ul默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的，float也具有此功能，设置float后，就不用再display:block;了，浮动后自动就是块元素
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、付费专栏及课程。

余额充值