热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

css可以去掉浮动吗?

css可以去掉浮动;css去掉浮动的方法:1、父级容器定义“overflow:hidden”样式;2、浮动结尾处,添加带有“clear:both”样式的div或p标签;3、父级容器定义“overflow:auto”样式。

css可以去掉浮动;css去掉浮动的方法:1、父级容器定义“overflow:hidden”样式;2、浮动结尾处,添加带有“clear:both”样式的div或p标签;3、父级容器定义“overflow:auto”样式。

推荐教程:CSS视频教程

浮动是布局的时用到的一种技术,能够方便我们进行布局。

1、浮动的设置: css属性float: left/right/none 左浮动/右浮动/不浮动(默认)

2、浮动的原理: 使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘
3、浮动的影响: 对附近的元素布局造成改变,使得布局混乱

因为浮动元素脱离了普通流,会出现一种高度坍塌的现象: 原来的父容器高度是内部元素撑开的,但是当内部元素浮动后,脱离普通流浮动起来,那父容器的高度就坍塌,变为高度0px。

如下图:

清除浮动的5种方法

1、父级div定义overflow:hidden

	
  
Left
  
Right

原理: 使用overflow:hidden时,浏览器会自动检查浮动区域的高度。

优点: 简单,代码少,浏览器支持好。

缺点: 必须定义width或zoom:1,不能和position配合使用,因为超出的尺寸的会被隐藏。

建议: 只推荐没有使用position或对overflow:hidden理解的朋友使用。

2、结尾处加空div标签 clear:both

Left
Right
div2

原理: 添加一个空p,利用css提高的clear:both清除浮动,让父级p能自动获取到高度。

优点: 简单,代码少,浏览器支持好,不容易出现怪问题。

缺点: 不少初学者不理解原理; 如果页面浮动布局多,就要增加很多空p,让人感觉很不爽。

建议: 此方法是以前主要使用的一种清除浮动方法。

3、父级div定义height

	
  
Left
  
Right

原理: 父级p手动定义height,就解决了父级p无法自动获取到高度的问题。

优点: 简单,代码少,容易掌握。

缺点: 只适合高度固定的布局,要给出精确的高度,如果高度和父级p不一样时,会产生问题。

建议: 不推荐使用,只建议高度固定的布局时使用。

4、父级div定义overflow:auto

.div1{background:#000080;border:1px solid red;width:98%;overflow:auto}

原理: 同1,使用overflow:auto时,浏览器会自动检查浮动区域的高度。

优点: 简单,代码少,浏览器支持好。

缺点: 内部宽高超过父级p时,会出现滚动条。

建议: 不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

5、父级div定义伪类:after和zoom

  
Left
 
Right

优点: 浏览器支持好,不容易出现怪问题(目前: 大型网站都有使用,如: 腾迅,网易,新浪等等)。
缺点: 代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持。
建议: 推荐使用,建议定义公共类,以减少CSS代码。

更多编程相关知识,请访问:编程教学!!

以上就是css可以去掉浮动吗?的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • Docker基础入门与环境配置指南
    本文介绍了Docker——一款用Go语言编写的开源应用程序容器引擎。通过Docker,用户能够将应用及其依赖打包进容器内,实现高效、轻量级的虚拟化。容器之间采用沙箱机制,确保彼此隔离且资源消耗低。 ... [详细]
  • 探讨并提供解决方案以应对 'view is not in the window hierarchy' 的错误提示。 ... [详细]
  • 本文介绍了如何处理MySQL数据库中表 'xdb.auditlog' 被标记为已损坏的问题,并提供了解决方案。 ... [详细]
  • jquery java 文件上传_jQuery文件上传
    插件描述:这是一个文件上传的展示,看很多插件,并不满意就自己写了一个,可能兼容性不是很好,没有准确进行测试过& ... [详细]
  • 本文介绍了多种Eclipse插件,包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等,涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]
  • 本文详细介绍了一种实现PopupWindow全屏显示且能有效隐藏虚拟按键的技术方案,适用于Android开发。此方法经过实际测试,表现良好,兼容性优秀。 ... [详细]
  • BeautifulSoup4 是一个功能强大的HTML和XML解析库,它能够帮助开发者轻松地从网页中提取信息。本文将介绍BeautifulSoup4的基本功能、安装方法、与其他解析工具的对比以及简单的使用示例。 ... [详细]
  • 本视频详细介绍了如何利用J2EE、JBPM 3.x/4.3、Flex流程设计器、jQuery以及授权认证机制构建高效的企业普及版贝斯OA及工作流管理系统。 ... [详细]
  • BL550721、特点液晶驱动输出:Common输出4线,Segment输出36线内置显示寄存器364144bit2线串行接口(SCL,SDA)内置震荡电路内置液晶驱动电源电路13 ... [详细]
  • Mysqlcheck作为MySQL提供的一个实用工具,主要用于数据库表的维护工作,包括检查、分析、修复及优化等操作。本文将详细介绍如何使用Mysqlcheck工具,并提供一些实践建议。 ... [详细]
  • LIN总线技术详解
    LIN(Local Interconnect Network)总线是一种基于UART/SCI(通用异步收发器/串行接口)的低成本串行通信协议,主要用于汽车车身网络中智能传感器和执行器之间的通信。 ... [详细]
  • 在使用KVM虚拟化技术通过NAT模式启动虚拟机时,可能会遇到qemu-ifup-nat脚本执行失败的错误。本文将详细介绍如何诊断和解决这一问题。 ... [详细]
  • 本文介绍了Linux内核中TCP的三种接收队列:Prequeue、sk_receive_queue和Backlog。这些队列在数据包处理过程中扮演着重要角色,帮助提高系统性能和效率。 ... [详细]
  • 本文详细介绍了如何在Vue项目中集成和配置XGPlayer视频插件,包括安装步骤、基本配置以及常见问题的解决方法。 ... [详细]
  • Redis: 高效的键值存储系统
    Redis是一款遵循BSD许可的开源高性能键值存储系统,它不仅支持多种数据类型的存储,还提供了数据持久化和复制等功能,显著区别于其他键值缓存解决方案。 ... [详细]
author-avatar
陈艹桂肀琰
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有