【前段基础入门之】=>CSS浮动

2023-10-03 16:12
文章标签 基础 入门 css 前段 浮动

本文主要是介绍【前段基础入门之】=>CSS浮动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述
在这里插入图片描述

浮动的简介

  • 在最初,浮动是用来实现文字环绕图片效果的,现在浮动是主流的页面布局方式之一。
    在这里插入图片描述

元素浮动后的特点

  1. 🤢 脱离文档流
  2. 😊 不管浮动前是什么元素,浮动后:默认宽与高都是被内容撑开(尽可能小),且宽高可设
  3. 😊 即使是块级元素也不会独占一行,可以与其他元素共用一行
  4. 😊 不会发生 margin 合并,也不会 margin 塌陷,能够完美的设置四个方向的 margin 和 padding
  5. 😊 不会像行内块一样可以被当做文本处理(没有行内块的空白问题)

元素浮动后会有哪些影响

  • 对兄弟元素的影响

后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟元素无影响

  • 对父元素的影响

如果父元素未设置宽高,则不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素


解决浮动产生的影响(清除浮动

  1. 方案一: 给父元素指定高度,(只能解决父元素高度塌陷)。
  2. 方案二: 给父元素也设置浮动,(只能解决父元素高度塌陷)。
  3. 方案三: 给父元素设置 overflow:hidden,(只能解决父元素高度塌陷) 。
  4. 方案四: 在所有浮动元素的最后面,添加一个 块级 元素,并给该块级元素设置 clear:both
  5. 方案五: 给浮动元素的父元素,设置一个伪元素,通过伪元素清除浮动,原理与方案四相同。===>( 推荐使用)
.parent::after {content: "";display: block;clear:both;
}

在这里插入图片描述


总结浮动属性

CSS 属性描述属性值
float设置浮动left : 设置左浮动

right: 设置右浮动

none: 不浮动,默认值

clear清除浮动
清除前面兄弟元素浮动元素的响应
left : 清除前面左浮动的影响

right: 清除前面右浮动的影响

both: 清除前面左右浮动的影响

浮动布局小练习
在这里插入图片描述

附代码:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head><body><div class="box"><header><div>logo</div><div>banner1</div><div>banner2</div></header><div class="menu">菜单</div><article><aside class="left"><div><div>栏目一</div><div>栏目二</div></div><div><div>栏目三</div><div>栏目四</div><div>栏目五</div><div>栏目六</div></div></aside><aside class="right"><div>栏目七</div><div>栏目八</div><div>栏目九</div></aside></article><footer>页脚</footer></div></body></html>
.box {width: 960px;margin: 0 auto;
}.box>header {height: 80px;text-align: center;line-height: 80px;
}.box>header>div:first-child {width: 200px;height: 100%;float: left;background-color: #ddd;
}.box>header>div:nth-child(2) {width: 540px;height: 100%;float: left;margin: 0 0 0 10px;background-color: #ddd;
}.box>header>div:nth-child(3) {width: 200px;height: 100%;float: right;background-color: #ddd;
}.box>.menu {height: 30px;background-color: #ddd;text-align: center;line-height: 30px;margin: 10px 0;
}article {height: 410px;
}article>.left {width: 750px;float: left;
}article>.left>:first-child {height: 198px;text-align: center;line-height: 200px;
}article>.left>:first-child>div {height: 198px;border: 1px solid;width: 368px;
}article>.left>:first-child>div:first-child {float: left;margin-right: 10px;
}article>.left>:first-child>div:last-child {float: right;
}article>.left>:last-child {width: 750px;float: left;text-align: center;line-height: 198px;margin-top: 10px;
}article>.left>:last-child>div {border: 1px solid;float: left;height: 198px;width: 178px;margin-right: 10px;
}article>.left>:last-child>div:last-child {margin: 0;
}article>.right {width: 200px;float: right;text-align: center;
}article>.right>div {border: 1px solid;height: 128px;line-height: 128px;
}article>.right>div {margin: 0 0 10px 0;
}footer {height: 60px;background-color: #ddd;text-align: center;line-height: 60px;margin-top: 10px;
}

🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

这篇关于【前段基础入门之】=>CSS浮动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/584

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

数论入门整理(updating)

一、gcd lcm 基础中的基础,一般用来处理计算第一步什么的,分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题:

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站,手机流量可以访问IPV6网络的服务,为什么不在电脑搭建Home Assistant(hass),来控制你的设备呢?@智能家居 @万物互联

poj 2104 and hdu 2665 划分树模板入门题

题意: 给一个数组n(1e5)个数,给一个范围(fr, to, k),求这个范围中第k大的数。 解析: 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码: poj 2104: #include <iostream>#include <cstdio>#include <cstdlib>#include <al

MySQL-CRUD入门1

文章目录 认识配置文件client节点mysql节点mysqld节点 数据的添加(Create)添加一行数据添加多行数据两种添加数据的效率对比 数据的查询(Retrieve)全列查询指定列查询查询中带有表达式关于字面量关于as重命名 临时表引入distinct去重order by 排序关于NULL 认识配置文件 在我们的MySQL服务安装好了之后, 会有一个配置文件, 也就

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具,采用无代理架构(agentless),基于 SSH 连接进行管理,具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用,旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念

AI基础 L9 Local Search II 局部搜索

Local Beam search 对于当前的所有k个状态,生成它们的所有可能后继状态。 检查生成的后继状态中是否有任何状态是解决方案。 如果所有后继状态都不是解决方案,则从所有后继状态中选择k个最佳状态。 当达到预设的迭代次数或满足某个终止条件时,算法停止。 — Choose k successors randomly, biased towards good ones — Close