解决子元素设置浮动影响父元素问题

灰太狼 2022-06-09 12:10 385阅读 0赞

例：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8"/>
    <style> body{ margin:0;padding:0;} .div0{ width:400px;background-color:skyblue;} .div2,.div3{ width:100px;height:100px;background-color:red;float:left;} </style>
    </head>
    <body>
    <div class="div0">
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
    </body>
    </html>

此时父元素div0无法包含子元素，解决办法：

1.给父元素设置overflow
    
    .div0{overflow: hidden;}
    
    2.增加一个子元素，设置clear: both;
    
    <div style="clear:both"></div>
    
    3.给父元素设置float
    
    .div0{
       float:left;}
    
    缺陷：需要给父元素设置宽度。
    
    4.移动端经常使用的方法
    
    给父元素添加类class="clearfix"
    
    .clearfix::after,.clearfix::before{
        content: "";
        height:0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    
    /*伪元素before相当于在当前元素的第一个子元素前插入一个元素，after则是在之后插入一个元素*/
    
    //注：为区分伪类和伪元素css3提出伪元素使用::,因此为了兼容IE8及以下，应使用:after和:before。

发表评论取消回复

表情：

评论列表（有 0 条评论，385人围观）

还没有评论，来说两句吧...

相关阅读

相关 Css 实现父元素设置 border-radius 时影响子元素圆角

实现效果 ![在这里插入图片描述][20210127110421488.png_pic_center] 代码 <view class="my-group-pa

Myth丶恋晨/ 2022年11月19日 07:55/ 0 赞/ 307 阅读

相关 html元素设置浮动,html浮动元素

1. position:static 所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。一般来说，不用指定

秒速五厘米/ 2022年10月09日 13:29/ 0 赞/ 176 阅读

相关浅谈设置父元素透明度不影响子元素透明度

设置父元素opacity：0.5，子元素不设置opacity，子元素会受到父元素opacity的影响，也会有0.5的透明度。即使设置子元素opacity：1，子元素的opa

柔光的暖阳◎/ 2022年09月29日 06:12/ 0 赞/ 299 阅读

相关子元素设置margin-top，父元素也受影响

外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题

红太狼/ 2022年08月06日 01:15/ 0 赞/ 166 阅读

相关子元素margin-top为何会影响父元素？

问题如下一段很简单的代码： css如下： <style type="text/css"> { margin: 0px; padding: 0px; } .sh

╰半橙微兮°/ 2022年07月15日 01:37/ 0 赞/ 158 阅读

相关 css3父元素模糊不影响子元素

> 说一下css3父元素模糊不影响子元素的效果。在使用css3的filter属性设置背景模糊的时候，我们通常想到的做法是写如下的代码： <!DOCTYPE html>

ゞ浴缸里的玫瑰/ 2022年07月11日 05:43/ 0 赞/ 560 阅读

相关 css设置透明度不影响子元素

<body> <div style="background-color:rgba(0,255,0,0.2);"> 显示文字 </div>

末蓝、/ 2022年06月13日 07:18/ 0 赞/ 592 阅读

相关解决子元素设置浮动影响父元素问题

例： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/>

灰太狼/ 2022年06月09日 12:10/ 0 赞/ 386 阅读

相关父元素清除浮动

[清除浮动float (:after方法)][float _after] 1. 什么时候需要清除浮动？清除浮动有哪些方法？（1）对元素进行了浮动（float）后，该元

Myth丶恋晨/ 2021年10月09日 03:26/ 0 赞/ 387 阅读

相关 Vue怎么操作父元素、兄弟元素、子元素

<button @click = “getDom($event)”>点击</button> methods: { getDom(e) {

- 日理万妓/ 2021年09月24日 01:52/ 0 赞/ 985 阅读