前端CSS基础10(浮动)

前端CSS基础10(浮动)

  • 浮动
    • 元素浮动后的特点
    • 浮动后的特点
    • 浮动后的影响及解决
  • 浮动布局小练习

浮动

CSS中的浮动是一种布局技术,常用于实现元素的排列和定位。通过使用float属性,可以让元素在页面中左浮动或右浮动,使得其他内容围绕该元素布局。

在 CSS 中,可以使用 float 属性来使元素浮动。浮动的元素会脱离正常文档流,可以向左或向右移动,并尽可能靠近其相邻的浮动元素。
float 属性的常见取值包括:

  • left:元素向左浮动。
  • right:元素向右浮动。
  • none:默认值

元素浮动后的特点

浮动前:如以下代码,2号浮动前

<!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>
    <style>
         .outer{
            width: 400px;
            height: 400px;
            background-color:aqua;
            padding: 10px;
        }
        .box{
            font-size: 20px;   
            padding: 10px;
        }
        .box1{
            background-color:yellow;
        }
        .box2{
            background-color:antiquewhite;
            /* float: left;*/
        } 
        .box3{
            background-color:blue;
        }
        span{
            background-color: brown;
            font-size: 40px;
            vertical-align: middle;
        }
        img{
            height: 200px;
            float: left;
            margin-right: 0.5em;
        }
        .text::first-letter{
            font-size: 80px;
            float: left;

        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>

    </div>
</body>
</html>

在这里插入图片描述
浮动2后:
在这里插入图片描述
浮动3后
在这里插入图片描述

浮动后的特点

CSS 元素浮动后具有以下特点:

  • 脱离文档流:浮动元素会脱离正常文档流,不再占据原本的空间,而是向左或向右移动,允许其他内容环绕在其周围。(浮空)
  • **元素重叠:**浮动元素会尽可能靠近相邻的浮动元素,导致元素重叠。这通常会影响页面布局,需要通过清除浮动或其他方法来处理重叠的情况。
  • 不会独占一行,可以与其他元素共用一行。
  • **高度塌陷:**父元素的高度可能因为子元素浮动而无法被正常撑开,造成高度塌陷的问题。可以使用清除浮动的技术解决这个问题。
  • **文本环绕:**浮动元素可以使文本环绕在其周围,创造出独特的设计效果。
  • 浮动清除:为了避免浮动元素导致的布局问题,通常会使用清除浮动技术,包括清除浮动的伪元素、clear 属性等方法。
  • 不管浮动前是什么元素,浮动后,默认宽和高都是被内容撑开(尽可能小),而且可以设置宽和高。
  • 可以正常的设置四个方向的margin和padding。

浮动后的影响及解决

影响:

  • 对兄弟的影响:后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟无影响。
  • 对父元素的影响:不能撑起来父元素的高度,导致父元素高度塌陷;但是父元素的宽度依然束缚浮动的元素。

解决方案:

  • 方案一:在所有浮动元素的最后面,添加一个块级元素,并给该块级元素设置clear:both;

  • 方案二:给浮动的父元素,设置伪元素,通过伪元素清除浮动,如下:(推荐使用)

        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

clear 属性用于指定元素哪些方向的浮动元素是不允许靠近的。它只会对前面有浮动元素的元素生效。

以下是 clear 属性的属性值及功能:

clear: left;: 表示元素的左侧不允许存在浮动元素。如果左侧有浮动元素,这个元素将被清除浮动,并显示在浮动元素下方。

clear: right;: 表示元素的右侧不允许存在浮动元素。如果右侧有浮动元素,这个元素将被清除浮动,并显示在浮动元素下方。

clear: both;: 表示元素两侧都不允许存在浮动元素。即使左右两侧都有浮动元素,这个元素也会被清除浮动,并显示在所有浮动元素下方。

clear: none;: 默认值,表示元素两侧都可以存在浮动元素,不会清除任何浮动
布局中的一个原则:设置浮动的时候,兄弟元素要么全都浮动,要么全都不浮动。

浮动布局小练习

  • 块元素共用一行就是浮动,不浮动的块元素就是独占一行。
  • 块元素本来就是独占一行,想让几个块元素并行则用到浮动。
  • 每用到浮动,就在父元素使用浮动消除,浮动消除代码如下:使用以下代码,只需要在使用浮动元素的父类元素加上一个class="clearfix"的类就行。
        .clearfix::after{
            content: '';
            display: block;
            clear: 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>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .leftfix{
            float: left;
        }
        .rightfix{
            float: right;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        .container{
            width:960px;
            margin:0 auto;
            text-align: center;
            }
        .loge{
            width:200px;
        }
        .banner1{
            width:540px;
            margin:0px 10px;
        }
        .banner2{
            width:200px;
        }
        .loge,.banner1,.banner2{
            height: 80px;
            background-color: #ccc;
            line-height: 80px;
        }
        .menu{
            height: 30px;
            background-color: #ccc;
            margin-top: 10px;
            line-height: 30px;
        }
        .item1,.item2{
            width: 368px;
            height: 198px;
            border: 1px solid #ccc;
            line-height:198px;
            margin-right: 10px;
        }
        .content{
            margin-top:10px;
        }
        .item3,.item4,.item5,.item6{
            width: 178px;
            height: 198px;
            border: 1px solid #ccc;
            margin-right: 10px;
            line-height: 198px;

        }
        .bottom{
            margin-top: 10px;
        }
        .item7,.item8,.item9{
            width: 188px;
            height: 128px;
            border: 1px solid #ccc;
        }
        .item7,.item8{
            margin-bottom: 10px;
        }
        .foot{
            width: 960px;
            height: 60px;
            background-color: #ccc;
            margin-top: 10px;
            line-height: 58px;
        }
    </style>
</head>
<body>
    <!-- 整体 -->
<div class="container ">
        <!-- 头部 -->
    <div class="page-header clearfix">
        <div class="loge leftfix">loge</div>
        <div class="banner1 leftfix">banner1</div>
        <div class="banner2 leftfix">banner2</div>
    </div>
    <!-- 菜单 -->
    <div class="menu">菜单</div>
    <!-- 内容区 -->
    <div class="content clearfix">
        <!-- 内容区左 -->
        <div class="left leftfix ">
            <!-- 内容区上半部分 -->
            <div class="top clearfix">
                <div class="item1 leftfix">栏目一</div>
                <div class="item2 leftfix">栏目二</div>
            </div>
            <!-- 内容区下半部分 -->
            <div class="bottom clearfix">
                <div class="item3 leftfix">栏目三</div>
                <div class="item4 leftfix">栏目四</div>
                <div class="item5 leftfix">栏目五</div>
                <div class="item6 leftfix">栏目六</div>
            </div>
        </div>
        <!-- 内容区右 -->
        <div class="right rightfix">
            <div class="item7">栏目七</div>
            <div class="item8">栏目八</div>
            <div class="item9">栏目九</div>
        </div> 
    </div>
    <!-- 页脚 -->
    <div class="foot">页脚</div>

</div>

</body>
</html>

之前不太了解的点

        *{
            margin: 0px;
            padding: 0px;
        }

在CSS中,*{ margin: 0px; padding: 0px; }的作用是移除所有HTML元素的外边距(margin)和内边距(padding)。

外边距(margin)是指元素周围的空白区域,用于控制元素与其他元素之间的间距。而内边距(padding)是指元素内容与边框之间的空白区域,用于控制元素内部内容的间距。

通过将marginpadding都设置为0,可以消除所有元素的外边距和内边距,使页面布局更加紧凑。这在某些情况下可能是有用的,例如当你想要创建一个自定义的布局或者去除默认的浏览器样式时。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu18.04系统编译openwrt21.02.3

搭建ubuntu18.04环境 使用虚拟机安装ubuntu环境网上教程很多&#xff0c;这里不做赘述&#xff0c;主要是安装一些我们在编译openwrt时可能会用到的一些工具环境 sudo apt-get update sudo apt instll libncurses-dev gawk sudo apt-get install build-essential libncurses5…

pytest数据驱动DDT(数据库/execl/yaml)

常见的DDT技术 数据结构&#xff1a; 列表、字典、json串 文件&#xff1a; txt、csv、excel 数据库&#xff1a; 数据库链接 数据库提取 参数化&#xff1a; pytest.mark.parametrize() pytest.fixture() …

2023年图灵奖揭晓,Avi Wigderson成为双冠王

文章目录 Avi Wigderson双冠王个人简介约翰纳什致敬 Avi Wigderson 2024年4月10日&#xff0c;ACM宣布Avi Wigderson为2023年ACM A.M.图灵奖获得者&#xff0c;以表彰他对计算理论的基础性贡献&#xff0c;包括帮助我们重新理解随机性在计算中的作用&#xff0c;以及他在理论计…

第一届长城杯半决赛wp和AWD笔记

目录 AWD 渗透 cfs 单节点1 AWD笔记 AWD工具 文件比较工具 Web漏洞扫描工具 waf工具 代码审计工具 批量网站备份文件泄露扫描工具 cms通杀漏洞的利用 通杀脚本和批量提交flag脚本 防御流程 攻击流程 注意 AWD 解题思路] 首先就是fscan快速扫描对应C段&#xf…

【Qt 学习笔记】Qt常用控件 | 显示类控件 | LCD Number的使用及说明

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 显示类控件 | LCD Number的使用及说明 文章编号&#xf…

贪吃蛇的C语言实现

目录 一、游戏流程设计 二、游戏实现原理 2.1如何创建并管理数据 2.2如何实现蛇身移动 2.3如何实现食物随机放置 2.4如何检测按键与调整光标位置 三、源代码 3.1 test.c 3.2 snake.h 3.3 snake.c 一、游戏流程设计 GameStart WelcomeToGame&#xff1a;打印欢迎界面…

架构师系列-消息中间件(九)- RocketMQ 进阶(三)-消费端消息保障

5.2 消费端保障 5.2.1 注意幂等性 应用程序在使用RocketMQ进行消息消费时必须支持幂等消费&#xff0c;即同一个消息被消费多次和消费一次的结果一样&#xff0c;这一点在使用RoketMQ或者分析RocketMQ源代码之前再怎么强调也不为过。 “至少一次送达”的消息交付策略&#xff…

开启医疗数据新纪元:山海鲸可视化智慧医疗解决方案

在数字化浪潮席卷而来的今天&#xff0c;智慧医疗作为医疗行业的创新力量&#xff0c;正以其独特的技术优势&#xff0c;推动着医疗服务的升级和变革。而在这场变革中&#xff0c;山海鲸可视化以其出色的数据可视化能力&#xff0c;为智慧医疗提供了强大的技术支持&#xff0c;…

用Python和Pygame实现简单贪吃蛇游戏

1.pip安装pygame pygam插件安装 pip install 插件名字 # 安装 pip uninstall 插件名字 # 卸载 pip install 插件名字 -i 指定下载的镜像网址 pip show 插件名字 # 查看插件名字 pip install pygame -i https://pypi.tuna.tsinghua.edu.cn/simple pip show p…

【网络编程】网络编程概念 | TCP和UDP的区别 | UDP数据报套接字编程 | Socket

文章目录 网络编程一、什么是网络编程1.TCP和UDP的区别 二、UDP数据报套接字编程DatagramSocketDatagramPacket回显服务器&#xff08;echo server&#xff09; 网络编程 一、什么是网络编程 通过网络&#xff0c;让两个主机之间能够进行通信。基于通信来完成一定的功能。 ​…

MacOS 下gif 文件的几种压缩方法

categories: Tips tags: Tips GIF 写在前面 最近想转换几个 tg 的 tgs 文件到 gif, 然后上传到微信, 所以又涉及到了 gif 的操作了. 工具介绍 安装 brew install imagemagick gifsicleimagemagick 是专业的图像处理工具, gifsicle 是专门处理 gif 的小工具 ,都是开源的. …

C++之AVL树的使用以及原理详解

1.AVL树 1.1AVL树的概念 1.2AVL树的定义 1.3AVL树的插入 1.4AVL树的旋转 1. 右单旋 2. 左单旋 3. 左右双旋 4. 右左双旋 1.5AVL树的验证 1.6AVL的实现 在之前对map/multimap/set/multiset进行了简单的介绍&#xff08;C之map_set的使用-CSDN博客&#xff09;&#xff0c;…

说说2024年暑期三下乡社会实践工作新闻投稿经验

作为一名在校大学生,我有幸自去年起参与学院组织的暑期大学生三下乡社会实践团活动。这项活动不仅是我们深入基层、服务社会的重要平台,也是展现当代大学生风采、传递青春正能量的有效途径。然而,如何将这些生动鲜活的实践故事、感人至深的瞬间传播出去,让更多人了解并受到启发…

火绒安全的应用介绍

火绒安全软件是一款集成了杀毒、防御和管控功能的安全软件&#xff0c;旨在为用户提供全面的计算机安全保障。以下是火绒安全软件的一些详细介绍&#xff1a; 系统兼容性强&#xff1a;该软件支持多种操作系统&#xff0c;包括Windows 11、Windows 10、Windows 8、Windows 7、…

xgp加速器免费 微软商店xgp用什么加速器

2001年11月14日深夜&#xff0c;比尔盖茨亲自来到时代广场&#xff0c;在午夜时分将第一台Xbox交给了来自新泽西的20岁年轻人爱德华格拉克曼&#xff0c;后者在回忆中说&#xff1a;“比尔盖茨就是上帝。”性能超越顶级PC的Xbox让他们趋之若鹜。2000年3月10日&#xff0c;微软宣…

25-代码随想录第454题.四数相加II

25-代码随想录第454题.四数相加II 给定四个包含整数的数组列表 A , B , C , D ,计算有多少个元组 (i, j, k, l) &#xff0c;使得 A[i] B[j] C[k] D[l] 0。 为了使问题简单化&#xff0c;所有的 A, B, C, D 具有相同的长度 N&#xff0c;且 0 ≤ N ≤ 500 。所有整数的范…

python 笔记ast.literal_eval

1 介绍 ast.literal_eval 是 Python 标准库 ast 模块中的一个函数&#xff0c;用于安全地评估表示 Python 字面量或容器&#xff08;如列表、字典、元组、集合&#xff09;的字符串 import ast # 解析并执行一个数字表达式 num ast.literal_eval("3.14") prin…

OpenFeign微服务调用组件!!!

1.Feign是什么 GitHub - OpenFeign/feign: Feign makes writing java http clients easierFeign makes writing java http clients easier. Contribute to OpenFeign/feign development by creating an account on GitHub.https://github.com/OpenFeign/feignFeign是Netflix开…

项目十一:爬取热搜榜(小白实战级)

首先&#xff0c;恭喜各位也恭喜自已学习爬虫基础到达圆满级&#xff0c;今后的自已python爬虫之旅会随着网络发展而不断进步。回想起来&#xff0c;我学过请求库requests模块、解析库re模块、lmxl模块到数据保存的基本应用方法&#xff0c;这一次的学习python爬虫之旅收获很多…

Vu3+QuaggaJs实现web页面识别条形码

一、什么是QuaggaJs QuaggaJS是一个基于JavaScript的开源图像识别库&#xff0c;可用于识别条形码。 QuaggaJs的作用主要体现在以下几个方面&#xff1a; 实时图像处理与识别&#xff1a;QuaggaJs是一款基于JavaScript的开源库&#xff0c;它允许在Web浏览器中实现实时的图像…