当子元素全部浮动时如何解决父元素无法撑开

问题描述:

在我们让元素浮动的时候,它就会离开原来的文档流,将它原先占有的空间释放。

打个比方,父元素就如一个有伸缩性的容器,而子元素就如一个气球。当没有设置容器的高宽时,他的高宽完全是被装在里面的气球撑开的,当子元素浮动时候,就像气球从容器里飘了出来,飘在了他的上方。而此时容器也就空了,由于伸缩性,高度就变为了o,看不见了。

而我们想要父元素显示出来,正常得被子元素撑开,怎么做呢?

 

代码描述:

复制代码

<style>
        #div1{
            background-color: blank;
        }
        #div2{
            width: 20%;
            height: 200px;
            background-color:red ;
            float: left;
        }
        #div3{
            width: 20%;
            height: 200px;
            background-color: blue;
            float: left;
        }
        #div4{
            width: 20%;
            height: 200px;
            background-color: yellow;
            float: left;
        }
    </style>
    <body>
        <div id="div1">
            <div id="div2"></div>
            <div id="div3"></div>
            <div id="div4"></div>
        </div>
    </body>

复制代码

 此时效果为:

此时父元素的黑色就没有显示出来,因为他的高度变为了0。

 


 

解决方案:

1、父元素添加高度。

 #div1{
            background-color: blank;
            height:200px;
        }

此方法可以将父元素显示出来。

缺点:但当你调整子元素高度的时候,若你要实现父元素包含子元素的效果,你就也要调整父元素高度。

实在很麻烦!所以此方法不要用!很low!

 

2、父元素也添加浮动。

#div1{
            background-color: black;
            width: 100%;
            float: left;
        }

以暴制暴的方法!别人浮起来你也要跟着一起浮。

缺点:虽然可以解决问题,但是后面要添加有不需要浮动的子元素,则影响其显示。

 

3、给父元素添加overflow:hidden;

#div1{
            background-color: black;
            overflow: hidden;
        }

缺点:一旦包含非浮动的子元素,则会影响其显示。

 

4、给父元素添加一个无关的元素,让添加的无关元素去清除浮动 clean:both;

复制代码

        #div5{
            clear:both;
        }
    </style>
    <body>
        <div id="div1">
            <div id="div2"></div>
            <div id="div3"></div>
            <div id="div4"></div>
            <div id="div5"></div>
        </div>
    </body>

复制代码

缺点:添加了一个无关元素,代码阅读受影响。

 

5、通过伪类来实现,在需要清除浮动的父元素里,添加一个清除浮动的伪类。

#div1:after{
            content: "";
            display: block;
            clear: both;
          }

推荐此方法!!!比较高级!!而且没有以上缺点!

转载于:https://www.cnblogs.com/CaseyWei/p/9387820.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值