前端学习CSS之神奇的块浮动

在盒子模型的基础上就可以对网页进行设计

不知道盒子模型的可以看前面关于盒子模型的内容

而普通的网页设计具有一定的原始规律,这个原始规律就是文档流

文档流

标签在网页二维平面内默认的一种排序方式,块级标签不管怎么设置都会占一行,而同一行不能放置两个块级标签
行级会默认占据本身大小的内容,下一个行级会紧贴在上一个内容的右边,直到没有位置后换行继续占用,这样的布局使得网页内容中的标签会默认紧贴在上一个标签的右边,如果右边摆不下了会自动换行继续从左至右摆放

这样一来每一个块标签都会另起一行,如果想在文档流中进行布局就会变动比较麻烦

网页布局的本质:

打破默认文档流的规则

浮动

所谓浮动指的就是使标签脱离原来的文档流,在父标签中浮动起来

float属性

none :不浮动
left :向左浮动
right :向右浮动
<!--这是一个默认的四个块级标签的网页-->
<body><div class="n1">新闻首页</div><div class="n1">体育新闻</div><div class="n1">科技前言</div><div class="n1">娱乐快报</div></body>

默认的样式是四个块级标签各占一行,非常浪费空间

在这里插入图片描述

可以使用float属性对其设置浮动,让其脱离原本的文档流

当一个块级标签浮动后其宽度默认变为内容的宽度


浮动存在的问题

浮动后四个块级标签都紧贴在一起了,而且原本的二维平面就没有内容了,如果在原来的基础上再添加一个块级标签的话会直接在四个浮动的块级标签后方,而不是新起一行

当一个标签浮动后,其下方的标签会上移

在这里插入图片描述

浮动会使标签完全脱离文档流,也就是不再在文档中占用位置,标签浮动以后完全脱离文档流,这时不会在影响父标签的高度,也就是浮动标签不会撑开父标签

clear属性

clear属性可以用于清楚标签周围的浮动对标签的影响,其他标签的位置不发生变化

left : 忽略左侧浮动
right :忽略右侧浮动
both :忽略全部浮动

可以通过在浮动后的标签后写一个空标签

<!--清除浮动-->
<div style = "clear:left;"></div>

这样就清除了浮动的影响

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/27679.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Kubernetes] etcd 单机和集群部署

文章目录 1.etcd基本概念2.etcd的基本知识3.etcd优势4.etcd单机部署4.1 linux部署4.2 windows部署4.3 docker安装etcd 5.etcd集群部署 1.etcd基本概念 etcd是一个高可用的分布式键值存储系统&#xff0c;是CoreOS&#xff08;现在隶属于Red Hat&#xff09;公司开发的一个开源…

0614,表达式,语句

题目一&#xff1a; 许多简单的交互式程序都是基于菜单的&#xff1a;它们向用户显示可供选择的命令列表&#xff1b;一旦用户选择了某条命令&#xff0c;程序就执行相应的操作&#xff0c;然后提示用户输入下一条命令&#xff1b;这个过程一直会持续到用户选择 "退出&qu…

关于如何使用不到 ¥800 实现电动升降桌自由(双电机)

前言 在房子装修之前&#xff0c;就想着拥有一个书房。但是如果书房里面没有书桌&#xff0c;那不扯淡么&#xff1f;之后想着天天坐这么久&#xff0c;腰部颈部经常不适&#xff0c;所以又开始纠结买哪款人体工学椅子比较合适。 说时迟那时快。当天偶然刷小红书的时候&#x…

微信小游戏插件申请,微信小程序插件管理

微信小游戏的插件申请与小程序不一样&#xff0c;官方没有提供一个统一的管理入口进行申请插件&#xff0c;以及查看插件&#xff0c;没有小程序方便的&#xff1b; 小程序申请查看插件入口如下图所示&#xff1a; 小游戏的插件可以通过以下的方式进行申请&#xff1a; 如下…

建筑八大员证报名一寸彩色照片要求及手机自拍方法解读

在建筑行业&#xff0c;八大员证的持有者是广受尊重的专业人士。然而&#xff0c;要成为一名合格的八大员&#xff0c;首先必须通过资格审核和报名流程。其中重要的一步就是提交一寸彩色照片&#xff0c;以确保个人信息准确无误。那么&#xff0c;你是否清楚报名时照片的要求以…

Linux笔记--权限与属性命令、查找指令、压缩命令、网络指令

权限 使用ls指令查看详细信息时 rwx分别代表读写执行三种权限&#xff0c;book代表book用户&#xff0c;对于权限来说三种权限分别代表二进制一位&#xff0c;即同时拥有rwx就是111&#xff0c;此时这个文件权限为775 改变权限为rw-rwxr-w指令 book100ask:~/Desktop$ chmod …

Vue I18n国际化插件

Vue I18n国际化插件 安装目录结构及文件内容./locales/lang/zh.js./locales/lang/en.js./locales/index.js main.js引入页面具体使用及语言切换&#xff08;Vue3&#xff09;刷新保存原语言&#xff0c;App.vue添加路由守卫注意点 中文文档&#xff1a; https://kazupon.githu…

sprintboot容器功能

容器 容器功能Spring注入组件的注解Component&#xff0c;Controller&#xff0c;Service&#xff0c;Repository案例演示 Configuration应用实例传统方式使用Configuration 注意事项和细节 Import应用实例 ConditionalConditional介绍应用实例 ImportResource应用实例 配置绑定…

【微信小程序开发实战项目】——如何去申请腾讯地图账号和在微信公众平台,配置request路径和添加地图插件

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

【算法-力扣】73.矩阵置零,一文彻底搞懂!

目录 一、题目描述 二、解题思路 三、参考答案 一、题目描述 矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 进阶&#xff1a; 一个直观的解决方案是使用 O(mn) 的额外空间&#x…

【机器学习】机器学习与物流科技在智能配送中的融合应用与性能优化新探索

文章目录 引言机器学习与物流科技的基本概念机器学习概述监督学习无监督学习强化学习 物流科技概述路径优化车辆调度需求预测 机器学习与物流科技的融合应用实时物流数据分析数据预处理特征工程 路径优化与优化模型训练模型评估 车辆调度与优化深度学习应用 需求预测与优化强化…

远程连接路由器:方法大全与优缺点解析

远程连接路由器的方式主要有以下几种&#xff0c;以下是每种方式的详细说明及其优缺点&#xff1a; 使用Web浏览器登录 方法&#xff1a;通过配置路由器的远程管理功能&#xff0c;允许用户通过互联网浏览器访问路由器的管理界面。用户只需输入路由器的公网IP地址或域名&#…

Flutter系列:关于ensureInitialized()

Flutter系列 关于ensureInitialized() - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28…

【数据结构】遍历二叉树(递归思想)-->赋源码

欢迎来到我的Blog&#xff0c;点击关注哦&#x1f495; 前言 二叉树遍历是指按照一定的顺序访问二叉树中的每个节点&#xff0c;使得每个节点恰好被访问一次。遍历是二叉树上最重要的运算之一&#xff0c;是二叉树上进行其他运算的基础。 一、二叉树遍历概念 二叉树遍历分类 …

C#.Net筑基-类型系统①基础

C#.Net的BCL提供了丰富的类型&#xff0c;最基础的是值类型、引用类型&#xff0c;而他们的共同&#xff08;隐私&#xff09;祖先是 System.Object&#xff08;万物之源&#xff09;&#xff0c;所以任何类型都可以转换为Object。 01、数据类型汇总 C#.NET 类型结构总结如下图…

项目采购管理

目录 1.概述 2.三个子过程 2.1.规划采购管理 2.2.实施采购 2.3.控制采购 2.4.归属过程组 3.应用场景 3.1.十个应用场景 3.2.软件开发项目 3.2.1. 需求识别和分析 3.2.2. 制定采购计划 3.2.3. 发布采购请求 3.2.4. 供应商评估与选择 3.2.5. 合同签订 3.2.6. 采购…

Unity动态添加聊天文本

1.创建一个滚动视图 2.调整滚动视图的位置并删掉这个 3.创建一个输入框和一个按钮 这里插一句一定要给content添加这个组件并设置单元格大小 4创建一个脚本并编写下面代码 using System.Collections; using System.Collections.Generic; using TMPro; using Unity.VisualScrip…

YouTube583美元账户做到一千多万美元,125万粉的顶级交易员

油管125万粉丝的Ross Cameron,一位把583美元账户做到一千多万美元。他说他曾经也是像无头苍蝇一样交易,最终凄惨爆仓,也就是在爆仓之后,他终于开始沉下心来研究交易策略,终于终于,他有一天找到了交易模型,并用它执行至今。 Ross Cameron无疑是最成功的日内交易员之一,而…

The Google File System 论文阅读

2003年USENIX&#xff0c;出自谷歌&#xff0c;开启分布式大数据时代的三篇论文之一 总体设计 假设 硬件损坏是常态&#xff0c;而非意外。例如磁盘损坏&#xff0c;断电&#xff0c;断网。所以持续的监控&#xff0c;错误诊断&#xff0c;错误恢复要纳入系统设计之中文件很…