CSS笔记(黑马程序员pink老师前端)浮动,清除浮动

浮动可以改变标签的默认排列方式。浮动元素常与标准流的父元素搭配使用.
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。

float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。


浮动特性

1.浮动元素会脱离标准流(脱标)
脱离标准普通流的控制,移动到指定位置,且浮动的盒子不再保留原先的位置
当为粉色div设置浮动后,其原有的位置空出,表现为压住了原来在其下方的蓝色div.
在这里插入图片描述
浮动元素只能影响在其后面的标准流
粉色div为标准流独占一行,蓝色div另起一行且浮起不占原有位置,绿色标准流div占据蓝色div的原有位置.
在这里插入图片描述
粉色浮动,蓝色标准流div占据其原有位置且独占一行,绿色浮动div另起一行浮动显示.
在这里插入图片描述

2.浮动的元素会一行内显示并且元素顶部对齐
若父级元素的宽度不够,则会自动换行,另起一行重新对齐排列.
在这里插入图片描述

3.浮动的元素会具有行内块元素的特性
任何元素都可以浮动,浮动的元素会具有行内块元素的特性.



清除浮动

由于父级盒子很多情况下,不方便给高度,最好由子元素撑开. 但是子盒子浮动又不占有位置,当不设置父级盒子高度时,就会影响下面的标准流盒子,所以需要清除浮动
在这里插入图片描述
1.额外标签法:浮动元素的末尾添加一个清除浮动的空标签(必须是块元素).

<div style="clear: both;"></div>

2.为父元素添加 overflow:hidden;(属性值为auto或者scroll也可) 缺点是无法显示溢出的部分
3.:after伪元素法,相当于额外标签法的升级版,在父元素里面的最后添加了一个空的块元素.优点是没有真的增加标签,结构简单.

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {/* IE6,7专有 */*zoom: 1;
}

4.双伪元素清除浮动,代码比伪元素法稍简洁.

<!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><style>* {margin: 0;padding: 0;}li {list-style: none;}.top {width: 630px;background-color: pink;margin: 10px auto;}.top ul li {float: left;width: 150px;height: 240px;background-color: skyblue;margin-right: 10px;margin-bottom: 10px;}.top ul .last {margin-right: 0px;}.bottom {background-color: aquamarine;height: 40px;}.clearfix::before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {/* IE6,7专有 */*zoom: 1;}
</style><body><div class="top clearfix"><ul><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul></div><div class="bottom"></div>
</body></html>

显示效果
在这里插入图片描述

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

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

相关文章

xss前十二关靶场练习

目录 一、xss原理和分类 1.原理 2.分类&#xff1a;xss分为存储型和反射型以及dom型 &#xff08;1&#xff09;反射性 &#xff08;2&#xff09;存储型 &#xff08;3&#xff09;dom型 二、靶场关卡练习​编辑 1.第一关 2.第二关 3.第三关 4.第四关 5.第五关 6…

Redis——认识Redis

简单介绍 Redis诞生于2009年&#xff0c;全称是Remote Dictionary Server&#xff0c;远程词典服务器&#xff0c;是一个基于内存的键值型NoSQL数据库。 特征 键值&#xff08;Key-value&#xff09;型&#xff0c;value支持多种不同数据结构&#xff0c;功能丰富单线程&…

对象模型和this指针(个人学习笔记黑马学习)

1、成员变量和成员函数 #include <iostream> using namespace std; #include <string>//成员变量和成员函数分开存储class Person {int m_A;//非静态成员变量 属于类的对象上的static int m_B;//静态成员变量 不属于类的对象上void func() {} //非静态成员函数 不…

博客程序系统其它功能扩充

一、注册功能 1、约定前后端接口 2、后端代码编写 WebServlet("/register") public class RegisterServlet extends HttpServlet {Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置…

《向量数据库指南》——提高向量数据库Milvus Cloud 2.3的运行效率

简介:向量数据库彻底改变了我们处理复杂数据结构的方式: 向量数据库彻底改变了我们处理复杂数据结构的方式,为高维矢量提供了高效的存储和检索。作为向量数据库专家和《向量数据库指南》的作者,我很高兴能与大家分享向量数据库运行效率方面的最新进展。在本文中,我们将探讨…

ARM编程模型-常用指令集

一、ARM指令集 ARM是RISC架构&#xff0c;所有的指令长度都是32位&#xff0c;并且大多数指令都在一个单周期内执行。主要特点&#xff1a;指令是条件执行的&#xff0c;内存访问使用Load/store架构。 二、Thumb 指令集 Thumb是一个16位的指令集&#xff0c;是ARM指令集的功能…

PandaGPT部署演示

PandaGPT 是一种通用的指令跟踪模型&#xff0c;可以看到和听到。实验表明&#xff0c;PandaGPT 可以执行复杂的任务&#xff0c;例如生成详细的图像描述、编写受视频启发的故事以及回答有关音频的问题。更有趣的是&#xff0c;PandaGPT 可以同时接受多模态输入并自然地组合它们…

嵌入式linux(imx6ull)下RS485接口配置

接口原理图如下&#xff1a; 由原理图可知收发需要收UART_CTS引脚控制,高电平时接收&#xff0c;低电平时发送。通过查看Documentation/devicetree/bindings/serial/fsl-imx-uart.yaml和Documentation/devicetree/bindings/serial/rs485.yaml两个说明文档&#xff0c;修改设备树…

Nginx__高级进阶篇之LNMP动态网站环境部署

动态网站和LNMP&#xff08;LinuxNginxMySQLPHP&#xff09;都是用于建立和运行 web 应用程序的技术。 动态网站是通过服务器端脚本语言&#xff08;如 PHP、Python、Ruby等&#xff09;动态生成网页内容的网站。通过这种方式&#xff0c;动态网站可以根据用户的不同请求生成不…

分类算法系列⑤:决策树

目录 1、认识决策树 2、决策树的概念 3、决策树分类原理 基本原理 数学公式 4、信息熵的作用 5、决策树的划分依据之一&#xff1a;信息增益 5.1、定义与公式 5.2、⭐手动计算案例 5.3、log值逼近 6、决策树的三种算法实现 7、API 8、⭐两个代码案例 8.1、决策树…

SpringCloud(34):Nacos服务发现

1 从单体架构到微服务 1.1单体架构 Web应用程序发展的早期,大部分web工程师将所有的功能模块打包到一起并放在一个web容器中运行,所有功能模块使用同一个数据库,同时,它还提供API或者UI访问的web模块等。 尽管也是模块化逻辑,但是最终它还是会打包并部署为单体式应用,这…

C++:类和对象(二)

本文主要介绍&#xff1a;构造函数、析构函数、拷贝构造函数、赋值运算符重载、const成员函数、取地址及const取地址操作符重载。 目录 一、类的六个默认成员函数 二、构造函数 1.概念 2.特性 三、析构函数 1.概念 2.特性 四、拷贝构造函数 1.概念 2.特征 五、赋值…

deepstream6.2部署yolov5详细教程与代码解读

文章目录 引言一.环境安装1、yolov5环境安装2、deepstream环境安装 二、源码文件说明三.wts与cfg生成1、获得wts与cfg2、修改wts 四.libnvdsinfer_custom_impl_Yolo.so库生成五.修改配置文件六.运行demo 引言 DeepStream 是使用开源 GStreamer 框架构建的优化图形架构&#xf…

温控仪的工作原理

温控仪是调控一体化智能温度控制仪表&#xff0c;它采用了全数字化集成设计&#xff0c;具有温度曲线可编程或定点恒温控制、多重PID调节、输出功率限幅曲线编程、手动/自动切换、软启动、报警开关量输出、实时数据查询、与计算机通讯等功能&#xff0c;将数显温度仪表和ZK晶闸…

Element Plus table formatter函数返回html内容

查看 Element Plus table formatter 支持返回 类型为string 和 VNode对象&#xff1b; 若依全局直接用h函数&#xff0c;无需引用 下面普通基本用法&#xff1a;在Element Plus中&#xff0c;你可以使用自定义的formatter函数来返回VNode对象&#xff0c;从而实现更灵活的自定…

nvm管理(切换)node版本,方便vue2,vue3+ts开发

使用nvm切换node版本 1. 完全删除之前的node及npm&#xff08;清理干净Node: 应用程序&#xff0c;缓存的文件&#xff0c;环境变量 &#xff09; 2. 使用管理员身份安装nvm&#xff0c;下载如下 3. 安装完nvm之后找到nvm下载路径对应的文件 4. 使用管理员身份打开cmd&#xff…

人工智能和大数据:跨境电商如何实现定制化营销?

在跨境电商竞争激烈的市场中&#xff0c;如何精准地满足消费者的需求并提供个性化的购物体验成为了商家们面临的重要挑战。幸运的是&#xff0c;人工智能和大数据技术的崛起为跨境电商带来了新的机遇&#xff0c;使得定制化营销成为可能。本文将探讨人工智能和大数据在跨境电商…

C# OpenVino Yolov8 Detect 目标检测

效果 项目 代码 using OpenCvSharp; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using static System.Net.Mime.MediaT…

Mybatis 插入、修改、删除

前面几篇我们介绍了使用Mybatis查询数据&#xff0c;并且也了解了如何在Mybatis中使用JDK的日志系统打印日志&#xff1b;本篇我们继续介绍如何使用Mybatis完成数据的插入、修改和删除。 如果您对查询数据和Mybatis集成JDK日志系统不太了解&#xff0c;建议您先进行了解后再阅…

《Web安全基础》04. 文件操作安全

web 1&#xff1a;文件操作安全2&#xff1a;文件上传漏洞2.1&#xff1a;简介2.2&#xff1a;防护与绕过2.3&#xff1a;WAF 绕过2.3.1&#xff1a;数据溢出2.3.2&#xff1a;符号变异2.3.3&#xff1a;数据截断2.3.4&#xff1a;重复数据 3&#xff1a;文件包含漏洞4&#xf…