12-CSS浮动

news/2024/9/30 17:34:11

01 介绍

image

02 浮动规则

image

03 案例练习

3.1 缝隙的解决方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box">
    <span>abc</span>
    <span>123</span>
    <span>ABC</span>
  </div>
</body>
</html>
image 这种元素之间的缝隙是因为代码中的换行符被浏览器解析成了空格 使用浮动解决 ```html fold      Document    
    abc     123     ABC  
``` ![[01-前端/02-CSS布局/imgs/00021.png]] ## 3.2 百度页码 ```html foldDocument
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 下一页>
``` ![[01-前端/02-CSS布局/imgs/00022.png]]

04 关于多列布局使用浮动的方法

![[01-前端/02-CSS布局/imgs/00023.png]]

4.1 京东多列布局方案一(不推荐)

这种方式虽然可以解决,但是会有兼容性的问题,因为使用到了伪类
如果不考虑兼容性的情况可以使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.item {width: 1190px;margin: 0 auto;background-color: orange;height: 800px;}.item .box {float: left;width: 230px;height: 322px;background-color: red;margin-right: 10px;}.item .box:last-child {margin-right: 0;}</style>
</head>
<body><div class="item"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div>
</body>
</html>

![[01-前端/02-CSS布局/imgs/00024.png]]

4.2 京东多列布局方案2(不推荐)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.item {width: 1190px;height: 800px;margin: 0 auto;background-color: orange;}.item .box {float: left;width: 230px;height: 322px;margin-right: 10px;background-color: red;}/* 每5个加一个last-item，但是这种方案比较麻烦 */.item .box:nth-child(5n){margin-right: 0;}</style>
</head>
<body><div class="item"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box last-item">5</div><div class="box">6</div><div class="box">7</div><div class="box">8</div><div class="box">9</div><div class="box last-item">10</div></div>
</body>
</html>

![[01-前端/02-CSS布局/imgs/00025.png]]

4.3 京东多列布局方案3(推荐)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.item {width: 1190px;margin: 0 auto;background-color: orange;height: 800px;}.item .box {float: left;width: 230px;height: 322px;background-color: red;margin-right: 10px;}/* 根据公式: 父级盒子的宽度=子盒子+ margin left + margin right这种方案就是首先要用一个盒子把元素包裹起来*/.item .content {margin-right: -10px;}</style>
</head>
<body><div class="item"><div class="content"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div><div class="box">6</div><div class="box">7</div><div class="box">8</div><div class="box">9</div><div class="box">10</div></div></div>
</body>
</html>

![[01-前端/02-CSS布局/imgs/00026.png]]
![[01-前端/02-CSS布局/imgs/00027.png]]

4.4 考拉多列布局

![[01-前端/02-CSS布局/imgs/00028.png]]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.content {width: 1100px;margin: 0 auto;height: 800px;background-color: #ccc;}.item {width: 220px;height: 168px;float: left;background-color: red;border: 1px solid #000;}</style>
</head>
<body><div class="content"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
</html>

效果如下
![[01-前端/02-CSS布局/imgs/00029.png]]
有2个问题需要解决:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.content {width: 1100px;margin: 0 auto;height: 800px;background-color: #ccc;}.item {width: 220px;height: 168px;float: left;background-color: red;border: 1px solid #000;margin-left: -1px;}</style>
</head>
<body><div class="content"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
</html>

![[01-前端/02-CSS布局/imgs/00030.png]]
解决第一个问题
![[01-前端/02-CSS布局/imgs/00031.png]]
![[01-前端/02-CSS布局/imgs/00032.png]]
这样看上去好像合理，但是右边会有一点突出
![[01-前端/02-CSS布局/imgs/00033.png]]
这样设置以后，不论如何，都会有一边会突出一点，只能通过调整其中一个item少1px

05 浮动的塌陷问题

5.1 塌陷的现象

如果删除高度,那么最下面的那个盒子会上来,因为content中的元素都是浮动,脱离了标准元素,不会向父元素汇报高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.item {width: 1190px;margin: 0 auto;background-color: orange;/* 如果删除高度,那么最下面的那个盒子会上来,因为content中的元素都是浮动,脱离了标准元素,不会向父元素汇报高度 *//* height: 500px; */}.item .box {float: left;width: 230px;height: 322px;background-color: red;margin-right: 10px;}/* 根据公式: 父级盒子的宽度=子盒子+margin left + margin right这种方案就是首先要用一个盒子把元素包裹起来*/.item .content {margin-right: -10px;}.other {width: 1500px;height: 100px;background-color: green;}</style>
</head>
<body><div class="item"><div class="content"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div></div><div class="other"></div>
</body>
</html>

![[01-前端/02-CSS布局/imgs/00034.png]]

5.2 解决塌陷问题推荐的方案

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.item {width: 1190px;margin: 0 auto;background-color: orange;}.item .box {float: left;width: 230px;height: 322px;background-color: red;margin-right: 10px;}/* 根据公式: 父级盒子的宽度=子盒子+margin left + margin right这种方案就是首先要用一个盒子把元素包裹起来*/.item .content {margin-right: -10px;}.clear-fix::after {content: "";clear: both;display: block;/* 加上浏览器的兼容性 */visibility: hidden;height: 0;}.clear-fix {/* 兼容IE6/IE7 */*zoom: 1;}.other {width: 1500px;height: 100px;background-color: green;}</style>
</head>
<body><div class="item"><div class="content clear-fix"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div></div><div class="other"></div>
</body>
</html>

5.3 解决塌陷问题的本质

![[01-前端/02-CSS布局/imgs/00035.png]]

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈，一经查实，立即删除！

相关文章

Golang性能优化实践

Golang性能优化实践

内存警察 警惕一切隐式内存分配 典型case：函数返回了字符串、切片，警惕一切字符串传进去的输入，函数内部重新分配了一个新的内存返回 对象复用 1.sync.pool 保证有一个ch大小的对象可用 假设有cpu核数那么多并发任务，可以保证gc的时候有保底在2.局部cache sync.pool毕竟加锁…
阅读更多...
linux+windows跨端md软件选择（未找到）

linux+windows跨端md软件选择（未找到）

目的 windows上使用typora当初是通过破解的方式实现的。现在装双系统时想做做笔记，没有一个管理的软件用起来很不方便。 要求正常编辑，没有难以忍受的问题。 目录管理及大纲（基于标题层级） linux+windows双端，且linux端能够读取。 从粘贴图片能够在相应的img目录下创建图片…
阅读更多...
Linux Debian安装教程

Linux Debian安装教程

本教程介绍了如何安装和配置 Linux Debian 操作系统，包括虚拟机创建、开启虚拟化、操作系统安装和SSH远程连接，适用于初学者和有经验的用户。Debian 是一个免费的开源操作系统，是最古老的 Linux 发行版之一，于 1993 年由 Ian Murdock 创建。它采用了自由软件协议，并且由志…
阅读更多...
c# 获取年,月,日,时,分,秒,星期几

c# 获取年,月,日,时,分,秒,星期几

this.nian.Text = DateTime.Now.Year.ToString(); //获取年 this.yue.Text = DateTime.Now.Month.ToString(); //获取月 this.ri.Text = DateTime.Now.Day.ToString(); //获取日 this.xingqi.Text = DateTime.Now.ToString("dddd"); //获取周几 this.shijian.Text = …
阅读更多...
2024-06-13 闲话

2024-06-13 闲话

2024-06-13 闲话今日最乐
阅读更多...
多系统修改默认启动系统，grub

多系统修改默认启动系统，grub

问题 我的电脑装了Windows 和 kUbuntu双系统，但是默认是启动kUbuntu的，作为一个使用了多年windows的普通用户，我更希望默认启动是Windows而不是Linux。因此需要修改顺序。 解决 使用root权限修改/boot/grub/grub.cfg文件。 很多文章里都说windows是4，但是我设置了并没有反应…
阅读更多...
php基础语法_面向对象

php基础语法_面向对象

PHP php代码标记 多种标记来区分php脚本 ASP标记：<% php代码 %> 短标记： 脚本标记: 标准标记（常用）： 简写风格： ASP风格：<% php代码 %>注意：简写风格和ASP风格需要在php.ini配置文件中修改以下配置为on，移植性差 short_open_tag = on asp_tags = on<ht…
阅读更多...
Linux脚本语言入门.md

Linux脚本语言入门.md

0、shell介绍 1）Shell是什么？ Shell是一个命令行解释器，它为用户提供一个详Linux内核发送请求以便运行程序的界面系统级程序，用户可以用Shell来启动、挂起、停止甚至是编写一些程序。 Shell还是一个功能相当强大的编程语言，易编写，易调试，灵活性较强。Shell是解释执行的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023