html css 中div的元素不在div标签内

Question

```

• {
  margin: 0;
  padding: 0;
  }

html,
body {
height: 100%;
font-size: 100px;
}

body {
display: flex;
flex-direction: column;
}

ul {
list-style: none;
}

header {
background-color: #fecc52;
height: 0.85rem;
width: 100%;
}

header>div {
font-size: 16px;
display: flex;
padding-left: 0.2rem;
padding-right: 0.2rem;
justify-content: space-between;
}

.headerTop {
align-items: flex-end;
height: 0.3rem;
}

.headerBtm {
align-items: center;
height: .35rem;
margin-top: 0.15rem;
margin-bottom: 0.10rem;
margin-left: 0.2rem;
margin-right: 0.2rem;
background: #fffaed;
}

.headerBtm input {
margin-left: 5px;
width: 100%;
border: none;
outline: none;
background: #fffaed;
}

.headerRight {
display: flex;
align-items: flex-end;
}

.headerRight>div {
height: 100%;
font-size: x-small;
}

main {
position: relative;
flex: 1;
overflow: scroll;
background: green;
}

.divImg {
width: 100%;
height: 2.9rem;
}

nav {
height: 1.78rem;
}

nav .content {
width: 100%;
margin-top: 0.15rem;
text-align: center;
height: 1.5rem;
font-size: 16px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.content>div {
width: 20%;
}

nav .changer {
width: 100%;
display: flex;
justify-content: center;
}

nav .changer>div {
width: 0.15rem;
height: 0.04rem;
border-radius: 0.4rem;
float: left;
}

nav .changer .div1 {
margin-right: 0.1rem;
background: #ffd161;
}

nav .changer .div2 {
background: #e4e4e4;
}

/* .divgwc {
width: 0.45rem;
height: 0.45rem;
border-radius: 0.45rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
position: absolute;
right: 0;
} */

.divImg2 {
height: 1.1rem;
display: flex;
justify-content: space-between;
padding-left: 0.2rem;
padding-right: 0.2rem;
}

.divImg2 img {
height: 1.1rem;
width: 1.75rem;
}

.div_xc {
padding-left: 0.2rem;
padding-right: 0.2rem;
}

.div_xc>div {
height: 120px;
box-sizing: border-box;
float: left;
width: 20%;
}

/* footer */

footer {
height: 0.5rem;
background: red;
width: 100%;
font-size: 16px;
display: flex;
justify-content: space-around;
}

```css

HTML

<title>Document</title>

<header>

    <div class="headerTop">

        <div class="headerLeft">
            <i class="iconfont icon-dingwei"></i>
            <span>静林湾 &gt; </span>

        </div>

        <div class="headerRight">
            <div>
                <p>晴</p>
                <p>-3°</p>
            </div>
            <i class="iconfont icon-day"></i>
            <p style="width: 0.2rem;"></p>
            <i class="iconfont icon-xiaoxi2"></i>
        </div>
    </div>

    <div class="headerBtm">
        <i class="iconfont icon-sousuo"></i>
        <input type="search" placeholder="快餐">
    </div>

</header>

<main>

    <div class="divImg">
        <img src="img/首页_02.png" alt="" style="width:100%;height:100% ;margin-top: 5px;">
    </div>

    <nav>

        <div class="content">

            <div>
                <i class="iconfont icon-meishi"></i>
                <p>美食</p>
            </div>

            <div>
                <i class="iconfont icon-meishi"></i>
                <p>美食</p>
            </div>

            <div>
                <i class="iconfont icon-meishi"></i>
                <p>美食</p>
            </div>

            <div>
                <i class="iconfont icon-meishi"></i>
                <p>美食</p>
            </div>

            <div>
                <i class="iconfont icon-meishi"></i>
                <p>美食</p>
            </div>

            <div>
                <i class="iconfont icon-meishi"></i>
                <p>美食</p>
            </div>

            <div>
                <i class="iconfont icon-meishi"></i>
                <p>美食</p>
            </div>

            <div>
                <i class="iconfont icon-meishi"></i>
                <p>美食</p>
            </div>

            <div>
                <i class="iconfont icon-meishi"></i>
                <p>美食</p>
            </div>

            <div>
                <i class="iconfont icon-meishi"></i>
                <p>美食</p>
            </div>


        </div>

        <div class="changer">

            <div class="div1"></div>
            <div class="div2"></div>

        </div>


    </nav>
    <!-- 
    <div class="divgwc">
        <i class="iconfont icon-gwc"></i>
    </div> -->

    <h3 style="font-size: 20px;margin-top: 0.35rem;padding-left: 0.2rem;">优惠专区</h3>

    <div class="divImg2">
        <img src="img/首页_05.png" alt="">
        <img src="img/首页_07.png" alt="">
    </div>

    <div class="div_xc">

        <div>
            <p style="font-size: 16px;">必吃</p>
            <p style="font-size: 16px;">9.9元起抢</p>
            <img src="img/images/首页_03.png" alt="">
        </div>

        <div>
            <p style="font-size: 16px;">必吃</p>
            <p style="font-size: 16px;">9.9元起抢</p>
            <!-- <img src="img/首页_11.png" alt=""> -->
        </div>

        <div>
            <p style="font-size: 16px;">必吃</p>
            <p style="font-size: 16px;">9.9元起抢</p>
            <!-- <img src="img/首页_11.png" alt=""> -->
        </div>

        <div>
            <p style="font-size: 16px;">必吃</p>
            <p style="font-size: 16px;">9.9元起抢</p>
            <!-- <img src="img/首页_11.png" alt=""> -->
        </div>



    </div>

    <div class="btm">


    </div>

</main>

<footer>

    <div>
        <i class="iconfont icon-shouye"></i>
        <p>首页</p>
    </div>

    <div>
        <i class="iconfont icon-shouye"></i>
        <p>首页</p>
    </div>

    <div>
        <i class="iconfont icon-shouye"></i>
        <p>首页</p>
    </div>

</footer>

运行移动端界面，.div_xc>div下面的图片不会包容在这个DIV里面，可如果给个float就会好 用解决留白的方式是不行的

Answer 1

.div_xc>div是浮动的，清除浮动就行，下面2个用其中一个就行。有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~
这样
.div_xc {
padding-left: 0.2rem;
padding-right: 0.2rem;
** overflow:hidden**
}
或者这样
.div_xc::after{clear:both}