CSS 清除浮动

浮动副作用


当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动。浮动也会产生一些问题,所以在使用的时候还需要清除浮动,这样操作起来还是很麻烦的,在没有浮动的时候就不要乱使用,因为还需要清除掉,这样的操作还是很繁琐的。

浮动元素会造成父元素高度塌陷,后续元素会受到影响

在日后的布局当中是否都使用清除浮动的方式去布局,这样就不会有标准流的问题,只有在有需要的时候才使用浮动去解决。因为使用浮动也会产生一些问题。

就和吃药的道理是一样的,如果没有生病就不需要吃药,因为药也是有副作用的,浮动也是如此。

<!DOCTYPE html>
<html>
<head>
  <title>使用CSS绝对定位absolute定位</title>
  <style>
    .container{
        width: 500px;
        height: 500px;
        background-color: blueviolet;
    }

    .box1{
        width: 100px;
        height: 100px;
        background-color: brown;
        margin: 5px;
    }

    .box2{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 5px;
    }

    .box3{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

在一个灰色的大盒子里面有三个小盒子 

如果将大盒子的高度height: 500px去掉,那么就是你内容所撑开的高度。如果宽度不设置就是全局宽度,因为块级元素默认就是100%的宽度。

如果将大盒子高度去掉,小盒子设置浮动,那么效果就没有了。

<!DOCTYPE html>
<html>
<head>
  <title>使用CSS绝对定位absolute定位</title>
  <style>
    .container{
        width: 500px;
        background-color: blueviolet;
    }

    .box1{
        width: 100px;
        height: 100px;
        background-color: brown;
        margin: 5px;
        float: left;
    }

    .box2{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 5px;
        float: left;
    }

    .box3{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        margin: 5px;
        float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

可以看到大盒子的宽度为0。此时大盒子高度为500,宽度为0。大盒子看不见了。这是因为浮动会造成父亲元素的高度塌陷,父元素不会被撑开了。

不仅父亲元素的高度塌陷,而且后续的元素也会受到影响。按道理来说,text元素是没有浮动的,没有浮动那么块级元素就是上下摆放,按道理就是在下面的位置。

<!DOCTYPE html>
<html>
<head>
  <title>使用CSS绝对定位absolute定位</title>
  <style>
    .container{
        width: 500px;
        background-color: blueviolet;
    }

    .box1{
        width: 100px;
        height: 100px;
        background-color: brown;
        margin: 5px;
        float: left;
    }

    .box2{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 5px;
        float: left;
    }

    .box3{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        margin: 5px;
        float: left;
    }

    .text{
        width: 100px;
        height: 100px;
        background-color: black;

    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="text"></div>
  </div>
</body>
</html>

可以看到还是被撑开了,有没有在下面。如果写在div的外面,也还是同样受到影响。

添加浮动了,并且也有高度,不像我们上面的高度为0.

 这个时候就需要清除浮动了,

父亲元素设置高度,可以解决高度塌陷的问题。后续受到clean的元素可以使用clean属性进行解决。

<!DOCTYPE html>
<html>
<head>
  <title>使用CSS绝对定位absolute定位</title>
  <style>
    .container{
        width: 500px;
        height: 500px;
        background-color: blueviolet;
    }

    .box1{
        width: 100px;
        height: 100px;
        background-color: brown;
        margin: 5px;
        float: left;
    }

    .box2{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 5px;
        float: left;
    }

    .box3{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        margin: 5px;
        float: left;
    }

    .text{
        width: 100px;
        height: 100px;
        background-color: black;

    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <div class="text"></div>
</body>
</html>

这样就是正常的,并且同级单独块级元素就被顶下来了,因为是同级关系,应该挨着它下面摆放。 

如果放在里面还是被挡住了,因为元素压根没有放浮动,按道理来说块级别元素应该在下面摆放,而不是在后面被遮挡住。

  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="text"></div>
  </div>

text受到影响了,clean的属性是清除浮动 left清除左浮动,right清除右浮动。在真实开发的时候不一定是左浮动还是右浮动,可以选择both。无论是左浮动还是右浮动都清除掉。哪个子元素出现问题了就在哪个子元素下面添加both。

    .text{
        width: 100px;
        height: 100px;
        background-color: black;
        clear: both;
    }


<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="text"></div>
  </div>
</body>

父亲元素overflow: hidden  clear: both两个属性要一起写,这种解决方案是日后使用比较广泛的一种解决方案。

<!DOCTYPE html>
<html>
<head>
  <title>使用CSS绝对定位absolute定位</title>
  <style>
    .container{
        overflow: hidden;
        clear: both;
        width: 500px;
        background-color: blueviolet;
    }

    .box1{
        width: 100px;
        height: 100px;
        background-color: brown;
        margin: 5px;
        float: left;
    }

    .box2{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 5px;
        float: left;
    }

    .box3{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        margin: 5px;
        float: left;
    }

    .text{
        width: 100px;
        height: 100px;
        background-color: black;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
  <div class="text"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>使用CSS绝对定位absolute定位</title>
  <style>
    .container{
        width: 500px;
        background-color: blueviolet;
    }
    
    .container::after{
        content: "";
        display: block;
        clear: both;
    }

    .box1{
        width: 100px;
        height: 100px;
        background-color: brown;
        margin: 5px;
        float: left;
    }

    .box2{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 5px;
        float: left;
    }

    .box3{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        margin: 5px;
        float: left;
    }

    .text{
        width: 100px;
        height: 100px;
        background-color: black;
        clear: both;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="text"></div>
</div>


</body>
</html>

清除浮动:如果造成了高度塌陷,如果方便设置就直接设置,如果不方便设置那么就要使用overflow hidden这种形式。

如果子元素受到影响分为里面和外面,如果是里面增加clean属性,如果在外面,那么之前的高度清除浮动,overflow和虚对象都可以默认将其撑下来了。(在里面需要增加clean)

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

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

相关文章

windows系统kafka小白入门篇——下载安装,环境配置,入门代码书写

目录 1. kafka 下载 2. 修改配置文件 2.1 文件夹内容 2.2 创建一个 data 空文件夹 2.3 修改 zookeeper.properties 配置文件 2.4 修改 server.properties 配置文件 2.5 创建 "zk.cmd" windows脚本文件 2.6 创建 "kfk.cmd" windows脚本文件 3. 启动…

docker搭建CI/CD环境配置过程中的常见问题

一、Jenkins 1、pull镜像问题 docker pull jenkins/jenkins:lts Using default tag: latest Trying to pull repository docker.io/library/centos ... Get https://registry-1.docker.io/v2/library/centos/manifests/latest: Get https://auth.docker.io/token?scoperepo…

小剧场短剧影视小程序源码,附带系统搭建教程

安装教程 linux/win任选 PHP版本&#xff1a;7.3/7.2&#xff08;测试时我用的7.2要安装sg扩展 不会的加QQ295526639&#xff09; 批量替换域名http://video.owoii.com更换为你的 批量替换域名http://120.79.77.163:1更换为你的 这两个都替换你的 /extend/yzf/lib/epay.config.…

论文笔记 - :DIGGING INTO OUTPUT REPRESENTATION FOR MONOCULAR 3D OBJECT DETECTION

Title: 深入研究单目 3D 物体检测的输出表示 Abstract 单目 3D 对象检测旨在从单个图像中识别和定位 3D 空间中的对象。最近的研究取得了显着的进展&#xff0c;而所有这些研究都遵循基于 LiDAR 的 3D 检测中的典型输出表示。 然而&#xff0c;在本文中&#xff0c;我们认为…

分享OpenTiny总结VUE目录结构

OpenTiny总结VUE目录结构&#xff0c;在设计规范和基础组件的基础上&#xff0c; 继续向上构建&#xff0c;提炼出典型模板/业务组件/配套设计资源&#xff0c;进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 Vue 项目目录结构 ├── node_modules…

js实现websocket断线重连功能

在项目开发中我们可能经常要使用websocket技术&#xff0c;当连接发生断线后&#xff0c;如果不进行页面刷新将不能正常接收来自服务端的推送消息。为了有效避免这种问题&#xff0c;我们需要在客户端做断线重连处理。当网络或服务出现问题后&#xff0c;客户端会不断检测网络状…

ubuntu-server部署hive-part3-安装mysql

参照 https://blog.csdn.net/qq_41946216/article/details/134345137 操作系统版本&#xff1a;ubuntu-server-22.04.3 虚拟机&#xff1a;virtualbox7.0 部署mysql 下载上传 下载地址 https://downloads.mysql.com/archives/community/ 以root用户上传&#xff0c;/usr/loc…

Transformer模型-softmax的简明介绍

今天介绍transformer模型的softmax softmax的定义和目的&#xff1a; softmax&#xff1a;常用于神经网络的输出层&#xff0c;以将原始的输出值转化为概率分布&#xff0c;从而使得每个类别的概率值在0到1之间&#xff0c;并且所有类别的概率之和为1。这使得Softmax函数特别适…

利用IP地址判断羊毛用户:IP数据云提供IP风险画像

在当今数字化社会&#xff0c;互联网已经成为人们日常生活和商业活动中不可或缺的一部分。然而&#xff0c;随着网络的普及&#xff0c;网络欺诈行为也日益猖獗&#xff0c;其中包括了羊毛党这一群体。羊毛党指的是利用各种手段获取利益、奖励或者优惠而频繁刷取优惠券、注册账…

微信小程序自定义弹窗组件

业务背景&#xff1a;弹窗有时字体较多&#xff0c;超过7个字&#xff0c;不适用wx.showToast. 组件代码 <view class"toast-box {{isShow? show:}}" animation"{{animationData}}"><view class"toast-content" ><view class&q…

【FTP,EMail】

文章目录 FTPFTP&#xff1a;文件传输协议FTP: 控制连接与数据连接分开FTP命令、响应 EMail电子邮件&#xff08;EMail&#xff09;邮件服务器EMail: SMTP [RFC 2821]SMTP&#xff1a;总结 FTP FTP&#xff1a;文件传输协议 向远程主机上传输文件或从远程主机接收文件。客户/服…

抖音视频关键词批量下载工具|视频爬虫采集软件

抖音视频批量提取工具&#xff0c;搜索即下载&#xff0c;轻松获取所需视频&#xff01; 正文&#xff1a; 想要轻松获取抖音上的精彩视频吗&#xff1f;现在&#xff0c;有了我们的抖音视频批量提取工具&#xff0c;一切变得简单易行&#xff01;Q:290615413无论是针对特定关…

美摄科技AI智能图像矫正解决方案

图像已经成为了企业传播信息、展示产品的重要媒介&#xff0c;在日常拍摄过程中&#xff0c;由于摄影技巧的限制和拍摄环境的复杂多变&#xff0c;许多企业面临着图像内容倾斜、构图效果不佳等挑战&#xff0c;这无疑给企业的形象展示和信息传递带来了不小的困扰。 美摄科技深…

55、美国德克萨斯大学奥斯汀分校、钱德拉家族电气与计算机工程系:通过迁移学习解决BCI个体差异性[不得不说,看技术还得是老美]

2024年2月5日跨被试最新文章&#xff1a; 德州州立大学奥斯汀分校研究团队最近的一项研究成果&#xff0c;通过非侵入式的脑机接口&#xff0c;可以让被试不需要任何校准就可以使用脑机接口设备&#xff0c;这意味着脑机接口具备了大规模被使用的潜力。 一般来说&#xff0c;…

杰理芯片AC79——物联网远程点亮/关闭LED灯

杰理芯片的封装简直太香了&#xff08;比STM32香多了&#xff09;&#xff0c;SDK也封装得很好&#xff0c;对于我这种手残党简直不要太友好。赶紧学起来&#xff0c;快速实现你想要的功能吧&#xff01; 芯片选型 杰理AC79 资料文档 环境搭建以及点亮第一盏灯请访问&#x…

大话设计模式之抽象工厂模式

抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;它提供了一种方式来创建一系列相关或依赖对象的家族&#xff0c;而无需指定其具体类。该模式通过提供一个抽象工厂接口&#xff0c;定义了一组可以创建不同类型对象的方法&#…

【JavaEE】_Spring MVC项目上传文件

目录 1. 文件上传具体实现 2. 保存文件 1. 文件上传具体实现 .java文件内容如下&#xff1a; package com.example.demo.controller;import com.example.demo.Person; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.Multip…

2013年认证杯SPSSPRO杯数学建模A题(第二阶段)护岸框架全过程文档及程序

2013年认证杯SPSSPRO杯数学建模 A题 护岸框架 原题再现&#xff1a; 在江河中&#xff0c;堤岸、江心洲的迎水区域被水流长期冲刷侵蚀。在河道整治工程中&#xff0c;需要在受侵蚀严重的部位设置一些人工设施&#xff0c;以减弱水流的冲刷&#xff0c;促进该处泥沙的淤积&…

SpringData ElasticSearch - 简化开发,完美适配 Spring 生态

目录 一、SpringData ElasticSearch 1.1、环境配置 1.2、创建实体类 1.3、ElasticsearchRestTemplate 的使用 1.3.1、创建索引 设置映射 1.3.2、简单的增删改查 1.3.3、搜索 1.4、ElasticsearchRepository 1.4.1、使用方式 1.4.2、简单的增删改查 1.4.3、分页排序查…

【路径规划论文整理(1)】Path Deformation Roadmaps(附带对PRM改进算法、同伦映射的整理)

本系列主要是对精读的一些关于路径搜索论文的整理&#xff0c;包括了论文所拓展的其他一些算法的改进思路。 这是本系列的第一篇文章&#xff1a; Jaillet, Lonard & Simon, Thierry. (2008). Path Deformation Roadmaps: Compact Graphs with Useful Cycles for Motion Pl…