php元素浮动会产生哪些影响,css浮动带来什么问题

css浮动带来的影响:1、由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素;若没有给父元素设置高度,那么父元素就不会在显示屏上显示。2、浮动元素不再占用原文档流的位置,它会对后面的元素排版产生影响。

e3131cca4e6ffa9da57095992e0a6fa1.png

本文操作环境:windows7系统、css3版本,Dell G3电脑。

我们要知道:浮动的框可以左右移动,直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流,当元素浮动之后,不会影响块级元素的布局,只会影响内联元素布局。

此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候,此时就会出现“高度塌陷”。

7f9ab24b88fbd691a43e0d4e35b5c1e3.png

在父元素没有设置高度的情况下,如果父元素里的子元素设置了浮动,那么父元素的高就不会自动被撑开的,也就没有高度值。

显然这样设置浮动后出现了一些问题,比如:父元素的margin受到影响,无法实现上下左右居中,

若没有给父元素设置高度,浮动后父元素的高度没有被撑开,那么父元素就不会在显示屏上显示。

总结:浮动导致的后果

(1)由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素;若没有给父元素设置高度,那么父元素就不会在显示屏上显示。

(2)与浮动元素同级的非浮动元素会跟随其后,因为浮动元素脱离文档流不占据原来的位置

(3)如果该浮动元素不是第一个浮动元素,则该元素之前的元素也需要浮动,否则容易影响页面的结构显示

由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动。

浮动如何清除?清除浮动流程

1.首先对父级进行设置css高度进行清除,一般情况下,我们对高度设置一个高度,把内容高度设置成100px,上下框为2px,这样一来,父级的总体高度就是102px。我们使用高度样式,但是前提我们要计算好内容的高度。

2.利用clear:both属性,进行清除浮动,我们可以在div中放入一个class="clear样式,就可以清除浮动。

3.对父级div进行定义属性,我们对父级css选择器定义一个overflow:hidden样式,就可以清除父级产生的浮动。

更多编程相关知识,请访问:编程入门!!

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

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

相关文章

pointnet分割自己的点云数据_细嚼慢咽读论文:PointNet论文及代码详细解析

论文标题:PointNet: Deep Learning on Point Sets for 3D Classification and Segmentation标签:有监督 | 特征学习、点云分类、语义分割首先回答3个问题作为引子:Q1:什么是点云?简单来说就是一堆三维点的集合&#xf…

linux将字符串转小写_小猿圈总结Linux常见命令(一)

科技发展的今天,互联网不断的发达,很多人学习Linux云计算的时候回因为记不住一些命令从而去找度娘,有时候因为因为找不到linux的命令而烦恼,下面是小猿圈linux讲师给大家总结的linux常见命令,希望对你有所帮助。1、cd命…

java声明arraylist,在java构造函数中声明ArrayList

我正在研究一个项目,并且我被教导在构造函数中实例化变量.我在使用ArrayList思想时遇到了一些麻烦.您能否提出一些最佳实践,我是否需要使用实例变量定义ArrayList,或者我可以在构造函数中执行此操作.谢谢你的建议!我有一个我正在谈论的内容的例子://impo…

eureka 集群失败的原因_Eureka集群的那些坑

今天遇到一个Eureka集群的一个坑。问题现场类似是这样的:两台Eureka组成的服务注册中心集群,两台服务提供方server1、server2,两个服务调用方client1、client2。正常的情况下:client1和client2通过服务中心获取的服务提供方的注册…

cnpm安装webpack_Webpack(一)介绍

一、Webpack是什么、为什么要使用它简单来说,Webpack是一个打包工具。站在2018年的角度,成为一个优秀的前端工程师,除了要会写页面样式和动态效果之外,还需要会用主流的单页面框架、Node.js、简单的前端的性能优化等等。加上现在一…

php生日验证,PHP验证生日

function pc_checkbirthdate($month, $day, $year) {$min_age 18; // 过18岁$max_age 100; // 超过122岁// 验证是不是合法时间,不会出现2月30号类似错误if (! checkdate ( $month, $day, $year )) {return false;}// 取得当前 年 月 日list ( $this_year, $this_…

python中的try与if,python中if和try的区别是什么

python中if和try的区别是什么发布时间:2020-09-10 10:04:05来源:亿速云阅读:85作者:小新这篇文章给大家分享的是有关python中if和try的区别是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看…

bytes数组转string指定编码_一篇文章弄懂Python中所有数组数据类型

前言数组类型是各种编程语言中基本的数组结构了,本文来盘点下Python中各种“数组”类型的实现。listtuplearray.arraystrbytesbytearray其实把以上类型都说成是数组是不准确的。这里把数组当作一个广义的概念,即把列表、序列、数组都当作array-like数据类…

怎么安装php模板,PHPWind八风格模板的安装及制作教程

PHPWind八风格模板的安装及制作教程 PHPWind 8风格模板的安装及制作教程一、PHPWind风格模板的安装:1、下载自己喜欢的PHPWind模板,由于PHPWind使用者众多,所以为了符合多种客户的需要,它的风格模板也是有万千种风格,大…

sklearn保存svm分类模型_【菜菜的sklearn】07 支持向量机(上)

小伙伴们大家好~o( ̄▽ ̄)ブ,我是菜菜,这里是我的sklearn课堂第7期,今天分享的内容是支持向量机(上),下周还有下篇哦~我的开发环境是Jupyter lab,所用的库和版本大家参考&a…

cef在android中使用_关于富文本在Android中的应用以及遇到的坑

富文本可以为用户提供更加多样化的文本展示形式,但由于其使用了H5标签的特殊性,一般都需要第三方框架的支持。这里推荐一款合适的第三方富文本框架,richeditor。首先我们要使用该功能需要引入相关jar包,引入方法如下compile jp.wa…

thinkphp中如何使用PHP函数,如何在ThinkPHP中使用函数进行回调

如何在ThinkPHP中使用函数进行回调发布时间:2020-12-23 15:11:45来源:亿速云阅读:85作者:Leah本篇文章为大家展示了如何在ThinkPHP中使用函数进行回调,内容简明扼要并且容易理解,绝对能使你眼前一亮&#x…

unity 敌人自动攻击和寻路_Unity暑期萌新入门:环境篇

大家好,新一期又跟大家见面了。上一节我们完成了角色的移动控制,然而John只能在空白的场景中移动。因此接下来这一节我们将添加关卡、调节光照,让John来到阴森的鬼屋。然后设置NavMesh(导航网格,现在先听个概念就好),为…

layui tree 加载慢_图片太多,加载慢,我用了layui里的方式,放在服务器后还是太慢!怎么解决???有没有什么优化的技巧???...

怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决???????layui.use([layer,flow], function(){v…

oracle 存储中文 u码,Oracle 汉字 占位

遇到了一个数据插入长度过长问题,记得大学时候,还说过oracle的不同编码下的的大小分配不是一样的,具体也忘记了,补上,以防下次犯二1 step先查看自己的oracle是什么字符集select userenv(language) from dual比如: SIMPLIFIED CHINESE_CHINA.ZHS16GBK 、 SIMPLIFIED CHINESE_CH…

element 表格宽度自适应_Java 设置Word中的表格自适应的3种方式

概述在Word创建表格时,可设置表格“自动调整”,有3种情况,通过Java程序设置可调用相应的方法来实现,即:根据内容调整表格AutoFitBehaviorType.Auto_Fit_To_Contents根据窗口调整表格AutoFitBehaviorType.Auto_Fit_To_W…

python实现决策树数据直接赋值导入_Python3.0 实现决策树算法的流程

决策树的一般流程检测数据集中的每个子项是否属于同一个分类if so return 类标签Else寻找划分数据集的最好特征划分数据集创建分支 节点from math import logimport operator#生成样本数据集def createDataSet():dataSet [[1,1,yes],[1,1,yes],[1,0,no],[0,1,no],[0,1,no]]lab…

linux oracle em使用,Linux平台下启动oracle 11g EM控制台

http://blog.csdn.net/webajax/article/details/6702233配置EM具体步骤一、配置EM dbconsole的步骤信息emca -config dbcontrol db -repos recreateEMCA 开始于 2007-10-12 11:16:40EM Configuration Assistant 10.2.0.1.0 正式版版权所有 (c) 2003, 2005, Oracle。保留所有权利…

源码里没有configure_深入源码理解.NET Core中Startup的注册及运行

开发.NET Core应用,直接映入眼帘的就是Startup类和Program类,它们是.NET Core应用程序的起点。通过使用Startup,可以配置化处理所有向应用程序所做的请求的管道,同时也可以减少.NET应用程序对单一服务器的依赖性,使我们…

天龙源码框架分析_天龙八部源码描述【转】

天龙八部(武侠世界)的源码很可能是天龙八部代码流出后改写的,因为在看了代码中可以找到一些证据,整个客户端分为:一个是编辑器,一个是客户端,采用OGREcegui自写的简单的物理碰撞检测FMOD自写的网络库。服务器端代码目前…