html中浮动导致的遮盖和元素高度过高的自适应设定

最新推荐文章于 2023-03-29 16:04:07 发布
VIP文章 最新推荐文章于 2023-03-29 16:04:07 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kevinsilent/article/details/95219114
版权

关于浮动导致的元素遮盖问题具体情况如下：
在这里插入图片描述
高度超出盒子的时候具体情况如下：

在这里插入图片描述
解决的时候实现的代码如下 ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试伪类以及浮动的使用</title>
		<style>
		*{
			margin:0;
			padding:0;
		}
		.hengGang{
			width:300px;
			height:100px;
			border:1px  ;
			margin:auto;
		}
			.hengGang p:nth-child(1){
				width:60px;
				height:1px;
				background-color: black;
				float:left;
				margin:auto;
				margin-top:40px;
				
			}
			.hengG
最低0.47元/天 解锁文章
逸然丶诺
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
子元素div高度不确定时父div高度如何自适应
01-19
内容的高度比较高了，但容器main的高度还是不能撑开。 我们可以通过三种方法来解决这个问题　1增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 复制代码代码如下: <div id=”m
html怎么实现悬停遮罩,用css实现悬浮层
weixin_33305287的博客
06-02 760
需要的效果是：图片在左，文字在右。图片下面没有文字。如下图中上边的图片不要跟文字同在一容器里就很好弄了 图片归图片，文字用个DIV或P包起来~~~左浮动 一定要不变动html结构的话，那就把外边的容器设成相对，然后左填充至少100px； 里面的图片设成绝对，距左设为零，距上默认为零也可以设置一下零。css实现div悬浮层，始终停留在浏览器的最下方，不新建一个html文件，命名为test.html。...
jQuery实现鼠标悬浮在div上时候动态浮动另外一个div层盖住第一个div层
★·°Never Stop°·☆〜ゝ。
03-19 6651
无标题文档 .caption{ width:200px; height:100px; background-color:red; position:fixed; } .layer{ width:200px; background-color:blue; position:fixed; margin-top:100px;/*和div的高度一致*/ display:no
关于css浮动问题
Buddha_ITXiong的博客
03-27 518
浮动产生的原因一般在给父级盒子下面的子元素设置了浮动属性的情况下，会导致父元素盒子没有被撑开。如下代码中分别给left,right设置了浮动属性，高度，背景色。父元素也同样设置了背景色 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta nam
数组去重常见的方法
qweasd222asd的博客
09-14 291
1.Set() 代码： var arr=[1,2,34,5,5,"5","hello","hello","world",88] var set=new Set(arr); var arr=[...set]; console.log(arr) 结果 2.splice() 代码： var arr=[1,2,34,5,5,"5","hello","hello","world",88] function fnc(arr){
html内容被背景图片遮住怎么办_定义BODY背景图后，DIV的背景图片显示不全（已解决）...
weixin_39593744的博客
12-20 2764
你的位置:问答吧-> WEB标准-> 问题详情定义BODY背景图后，DIV的背景图片显示不全(已解决)一个有趣的问题，当BODY有背景图片的时候，BODY里的DIV一旦也有背景图片，就显示不完全，被BODY的背景图片挡住了下面一部分...IE下被挡住的部分比较小，火狐下被挡住部分很大...两者都十分明显。当我把...
css浮动中避免包含元素高度为0的4种解决方法
09-25
当一个元素只包含浮动元素的时候，它会出现高度折叠，即元素的上下底边重合，和高度为0效果一样，针对这个问题与大家分享四种解决方法，感兴趣的你可以参考下本文或许对你更好的理解css有所帮助
Css浮动元素外层容器高度为0(无高度)的解决方法
09-25
在ie8、chrome浏览器中，包裹浮动的li元素的外层ul高度为0，ie7浏览器和ie8兼容模式显示正常，下面与大家分享下多种解决方法大家可以根据情况自由选择，希望对大家有所帮助
float元素浮动后高度不一致导致错位的解决办方法
09-25
当N个元素浮动后，会导致错位的问题。一般给元素一个固定的height就没有这个现象，下面与大家分享下当高度不一致时的解决方法
css解决浮动导致父元素高度坍塌的几种方法
11-21
以前布局经常会用到float进行布局，但是我们都知道使用浮动布局会存在一个问题-导致父元素高度坍塌 那我们一起来探究一下解决这个问题的方法！就先从文档流开始吧 一.定位的分类 普通流定位 浮动定位 相对定位 ...
css 设置背景图一半_css怎么背景图片显示不全？
weixin_39716044的博客
12-20 6142
css设置背景图片显示不全是因为背景图片过大导致的，我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。其中导致背景图片显示不全的原因是：设置背景图片所在div大小小于背景图片大小。示例：下面我们来看一下通过设置div大小来使背景图片完全显示：div{width:100px;height:100px;background-si...
html内容被背景图片遮住怎么办_完美实现文字置于图片之上且背景半透明
weixin_39685762的博客
12-20 3223
之前发过一篇关于 将图片的说明文字显示在图片之上且背景半透明效果 的文章，讲述了如何将文字置于图片之上且背景半透明，但那个解决办法会出现一个问题，就是背景虽然半透明了，但文字也会半透明，今天发现百度旅游上的实现方法，很完美地实现这个功能，现把代码共享如下：复制代码代码如下:文字置于图片之上且背景半透明 标准之路www.aa25.cna.title { color:#D3D3D4; backgrou...
BFC的3个特性
weixin_44066534的博客
09-13 173
1.属于同一个BFC的两个相邻Box的margin会发生折叠 问题代码如下： <head> <style> .box{ width: 100px; height: 100px; border: 2px solid rgb(247, 129, 129); margin: 100px } </style> </head> <body> &
关于浮动时元素背景色遮挡的问题及伪元素解决方法
zhenyuXing的博客
03-29 286
因为是类似下划线，所以我一开始考虑的是text-decoration属性，后来发现这是带圆角而且和字体重叠，所以下划线不太好满足这样的需求。我就把下划线同一个div的背景色来实现，通过绝对定位来确定他的位置。这个时候我们 可以用z-index:-99;通过父级设置position: relative;完成一个类似于下划线的需求。这样的话，效果图是这样的。这样的话就可以实现了。
CSS浮动
fcygcyfv的博客
04-21 347
CSS浮动 浮动元素不会盖住文字，文字会自动环绕在浮动元素周围。 一、特点： 设置浮动会以后元素会在父元素里面向左侧或右侧移动。 浮动元素会脱离文档流，不会占据原来文档流的位置。 父元素默认不会从父元素中移出。 浮动元素向左或享有移动时，不会超过它前面的其他浮动元素。 如果浮动元素是上面是一个没有浮动的块元素，则浮动元素无法上移。 浮动元素不会超过它上边的兄弟浮动元素，最多和它一样高。 二、脱离文档流的特点 块元素： 1.块元素不在独占页面一行。 2.脱离文档流以后，块元素的宽度和高度默认被内容撑开。
移动端html5页面导航栏悬浮遮挡内容第一行解决办法
weixin_33695082的博客
08-29 3651
参考：https://zhidao.baidu.com/question/1608232105428062147.html 1、设置导航栏div属性position:fixed; .nav-fixed{ position:fixed; left:0; top:0; height:1.36rem; width:100%; z-index:9999; } ...
float浮动后，父级元素高度塌陷和遮盖问题
weixin_34344403的博客
06-23 563
当子元素不浮动的时候，父元素的高度是由子元素撑起来的。 子元素A和B是两个div，独占一行 效果如图： 当子元素B浮动起来之后，父元素高度塌陷到只剩子元素A的高度 效果如图： 当给子元素A（div）设置CSS属性：display：inline 后，A的宽高将不起作用，宽高由内容撑开，即被字母A撑开。此时父级元素高度没有塌陷到和A一样，而...
CSS系列之标准文档流/display属性/浮动/边框塌陷问题/溢出处理/父级边框塌陷问题/inline-block和float的区别
DOGIOOH的博客
06-19 593
CSS系列之标准文档流/display属性/浮动/边框塌陷问题/溢出处理/父级边框塌陷问题/inline-block和float的区别 01 标准文档流 标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这是元素默认的排列方式。（未排版） 标准文档流组成： 块级元素（block） h1~h6、p、div、列表 内联元素（inline） span、a、img...
浮动的影响及解决方法
m0_53619602的博客
05-23 1470
一、浮动 浮动的元素会脱离标准流，不会再保留原先的的位置；浮动的元素会在一行内显示并根据元素顶部对齐，浮动的元素是互相贴靠在一起（没有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐；浮动的元素会具有行内块元素的特性。 浮动的典型应用：让多个块级元素一行内排列显示 浮动的准则： 第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 第二准则：先设置盒子大小，之后设置盒子位置 举例： <!DOCTYPE html> <html lang="en.
盒子高度随着内容自适应
最新发布
07-14
属性：将盒子的 display 属性设置为 table，然后将内容放在内部的 table-cell 元素中，这样盒子会根据表格单元格的高度自动调整。 ```css .box { display: table; } .box-content { display: table-cell; } ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值