子Div脱离文档流后怎么撑开父Div

最新推荐文章于 2023-11-03 14:27:54 发布
最新推荐文章于 2023-11-03 14:27:54 发布
阅读量4.6k 收藏 1
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Corazhang/article/details/77906021
版权

以下几种方法在不重复使用的情况下实验的

1. 给父元素设置宽高
2. 添加after伪类.clearfix

   .clearfix::after{
       content:'';
       display:block;
       clear:both;
   }

3.   给父元素设置padding也可以，但是会影响子元素的位置

4.   给父元素设置 overflow:hidden 或者 auto;

5.   因为浮动而脱离文档流的情况下，在父容器的底部加一个额外的标签，令其清除浮动，兼容性好
<div style="clear:both;"></div> 或者<br style="clear:both;" />

6.只给父元素加display:table;这种方法对float情况有用，对因定位而脱离文档流没有用；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            background-color: yellow;
            /*display: table;*/          
            position: relative;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: coral;
            margin: 100px;
        }
        #div3{
            width: 200px;
            height: 200px;
            background-color: greenyellow;  
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
    <div id="div3"></div>
</div>

</body>
</html>
 此时，div2有margin，效果如图

这里写图片描述

加上display:table后，效果如图（为什么呢？？是因为相当于一个表格，所以默认的从左上角开始？）

这里写图片描述

以上两种情况父div的宽度也不同
不脱离文档流的情况下，当把两个子div都加上display:table-cell;之后，如图

这里写图片描述

浮动的情况下，再设置table-cell效果，也是没有用的，下图；  定位的时候table-cell也是没有效果

这里写图片描述

     想一想，查一查基本就这几种情况，以后练习发现问题再来更新。
圣诞老人村的来信
关注
专栏目录
脱离文档流&margin-top重叠问题&清除浮动
nicecode
07-28 384
1.脱离文档流 脱离文档流的有: (1).浮动 (2).绝对定位 (3).固定定位 脱离文档流的特点: 1.行内元素都变成了块元素; 2.宽高都是由内容撑开 2.margin-top重叠问题 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>test</title> <style> *{
子div脱离文档流后怎么撑开父元素div
鑫鑫的博客
10-15 2097
尊重原创：https://blog.csdn.net/Corazhang/article/details/77906021 1给父元素设置宽高 2添加after伪类.clearfix .clearfix::after{content:''; display:block; clear:both;} 3给父元素设置padding也可以，但是会影响到子元素的位置 4给父元素设置overflow...
子Div使用Float后撑开父Div的几种方法
09-25
子Div撑开父Div，可以设置父元素overflow以及zoom，或者是父元素也是设置浮动效果，也可以在添加一个子元素，并设置clear样式
关于居中、子元素撑开父元素
weixin_43294560的博客
01-16 4408
实现父div宽高由内部元素撑开: 父div添加属性:overflow:hidden; 子元素定位时，无法撑开父元素，因为此时子元素已脱离文本流 实现任意元素垂直水平居中方法(单个居中同理): position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); 移动元素自身高宽的一半，因为定位时元素有自身高宽 垂直居中......
[css] flex 子元素自动撑开父元素宽度
最新发布
qq_14993591的博客
11-03 3474
这样，子元素将会垂直排列在一列内，并自动撑开父元素的宽度。同样地，如果子元素的高度总和超过了父元素的高度，则子元素会被压缩，以适应父元素的高度。这样，子元素将会水平排列在一行内，并自动撑开父元素的宽度。如果子元素的宽度总和超过了父元素的宽度，则子元素会被压缩，以适应父元素的宽度。对于水平排列的情况，我们可以设置父元素的。对于垂直排列的情况，我们可以设置父元素的。
子元素自动撑开父元素空间
qq_52317104的博客
10-13 2240
宽度 width !注意: 如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度. 块级元素，其 width 属性的值会自动撑满父元素的 width 区域 注意：width用百分比比的是父元素的width，就是说若取100%，父元素无影响，尽量用px。 块级元素会独占一行，其宽度自动填满其父元素剩余宽度 行内元素，其 width属性的值是内部元素内容自动撑开的宽度。 < body >元素比较特殊，不需要设置 width 属性，宽度会自动适应浏
子元素宽度如何撑开父元素宽度
nunumaymax的博客
05-21 6416
子元素宽度如何撑开父元素宽度代码效果如下 一个横向滚动栏，子元素高度会自动撑开父元素的高度，但是好像子元素宽度不能自动撑开父元素的宽度。这是我们需要使用css使子元素宽度可以自动撑开父元素宽度，避免计算父元素的宽度，用到两个主要的css的属性是：（1）横向滚动布局 white-space: nowrap;（2）内部元素 display: inline-block。 代码 <style> .wrap{width:300px;height:100px;background:#000;
DIV设置浮动后无法撑开外部DIV的解决办法
12-04
这是因为浮动元素会脱离常规文档流，不再占据原本的空间，从而导致其父元素无法感知到其高度，从而无法自动撑开。 这种问题在`div + CSS`布局中很常见，特别是在早期的网页设计中，浮动布局是创建多列布局的常用...
html div没有被撑开的原因及解决办法
11-15
如果`div`内部的子元素被设置了`position: absolute`，它会从正常文档流中移除，不再影响父元素的尺寸。因此，父`div`可能不会自动扩展以适应它。 **解决方案：** 1. 如果可能，避免使用绝对定位，或者尝试使用相对...
浮动子div撑开父div的几种方法、给select赋值、zoom样式的含义、实现select下拉框readonly...
weixin_30451709的博客
06-13 349
1.浮动子div撑开父div的几种方法： （1）在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>，该div不设置任何样式，只用来清除浮动 （2）在父div的css样式中设置overflow：hidden;zoom:1; （3）设置父div也为浮动元素float：left；，这样设置的坏处是不能用margin：au...
html中子div用了浮动怎样让父div的大小自动撑开（清除浮动）
asxxf的博客
11-24 1587
html中子div用了浮动怎样让父div的大小自动撑开（清除浮动）
前端html——浮动元素撑开父级元素
qq_41141657的博客
02-23 955
1.页面内容 &lt;div id="one"&gt;&lt;/div&gt; &lt;div id="two"&gt;&lt;/div&gt; 2.页面样式 *{ padding: 0; margin: 0; } #one{ width: 1000px; border: 5px solid black; } #two{ width...
flex布局，子元素撑开父元素
大兵的猫
04-03 9509
1.将父元素设置为display:flex时，子元素不设高度时（宽度需要设置）会默认撑开满父元素高度： 2.经典两栏布局 如果child1有子元素的话，并且子元素宽度过大，会撑开child1，将child2的宽度挤压，如下： 解决办法将child1的宽度设置为：width:0; ...
子元素固定宽度 父元素宽度被撑开
weixin_33816821的博客
12-19 3021
背景：父元素宽度百分百，子元素固定宽度，当父元素的宽度变小，子元素会被挤下去，如何让子元素的宽度决定父元素的宽度，让父元素的宽度被撑开？解决方法：1.若 父元素 下的子元素是 行内元素（有固定宽度）父元素 { white-space: nowrap; // 子元素不被换行,超出部分 scroll 表现 }复制代码2.若 父元素 下的子元素是 块级元素 （默认宽度百分百）父元素 { ...
纯CSS让子元素突破父元素的宽度限制
热门推荐
王为仁的博客
06-01 2万+
纯CSS让子元素突破父元素的宽度限制 在写样式中，我们可以经常看到这样的情况 代码如下 &lt;div style="width: 300px;border: 4px solid #000;margin: 20px;padding: 2px;"&gt; 父元素 &lt;div style="border: 1px solid blue;height: 100px;w...
子div设置float后会导致父div无法自动撑开解决方案
sxl2017的博客
03-09 373
子div设置float后会导致父div无法自动撑开解决方案
多重盒子嵌套下，子盒子撑开父盒子，父盒子宽度随子盒子内容自适应
qq_42490671的博客
04-15 4219
把需要自适应的那层父盒子设置为行内块元素
子元素绝对定位后脱离文档流，使父元素自适应子元素高度
qq_40797485的博客
01-15 7009
脱离文档流的两种方法：float 和 position:absolute/fixed 前提：父元素高度自动，需要子元素撑开父元素 当子元素使用 float 时，脱离文档流，父元素高度塌陷，但是可以使用 zoom:1 + 伪元素 使其清除浮动，从而使得父元素高度被子元素撑开。   当子元素使用absolute时，使用 jq 获取子元素高度，再赋给父元素即可： $('body').css(...
什么是div高度塌陷
09-03
浮动元素会脱离文档流，其他未浮动的元素会忽略其存在，导致父元素的高度无法正常撑开；绝对定位的元素相对于其最近的已定位祖先元素进行定位，也会导致父元素的高度塌陷。 为了解决div高度塌陷问题，可以使用以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值