css - 在某个div中既有float元素，又有非float元素， 但是float元素逃离了附div。
本文介绍了css - 在某个div中既有float元素，又有非float元素， 但是float元素逃离了附div。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
代码中的content是父div，最初content中只有section元素，后来增加了浮动的item元素后，item元素脱离了content的div。
我想实现的效果是：item元素看起来是在content内的，而不是脱离出来的。
请问这个css该怎么调整？
本人前端菜鸟，望指点迷津。
update: 20170612 12:25
经过大家的指点迷津，只要在.content内增加overflow:hidden即可。
但是我没有明白 为什么增加overflow:hidden就能做到这一点？
根据w3school的解释，overflow:hidden的作用是：当内容溢出元素框的时候，剪裁内容，并且剪裁掉的内容是不可见的。
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>CSS</title>
<style>
*{
margin:0px;
padding:0px;
}
.container {
position: relative;
background-color: #EFEFF4;
border-style: double;
}
.nav{
float:left;
width:28%;
border-size:1px;
border-style:solid;
border-color:blue;
margin-bottom:1em;
padding-bottom:1em;
}
.nav .menu_item{
border-size:1px;
border-style:solid;
border-color:#E64340;
padding:1em;
margin-top:1em;
margin-left:1em;
margin-right:1em;
}
.content{
margin-left:29%;
border-size:1px;
border-style:solid;
border-color:pink;
padding-left:1em;
padding-right:1em;
}
.content .section{
margin-top:1em;
margin-bottom:1em;
border-size:1px;
border-style:solid;
border-color:#E64340;
padding:1em;
}
.content .item{
float:right;
height:100px;
width:175px;
margin:1em;
padding:1em;
border-size:1px;
border-style:solid;
border-color:#E64340;
}
.after-box{
clear:both;
}
.div{
border-size:1px;
border-style:solid;
border-color:#E64340;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<ul>
<li class="menu_item">menu</li>
<li class="menu_item">menu</li>
<li class="menu_item">menu</li>
<li class="menu_item">menu</li>
<li class="menu_item">menu</li>
<li class="menu_item">menu</li>
<li class="menu_item">menu</li>
<li class="menu_item">menu</li>
<li class="menu_item">menu</li>
</ul>
</div>
<div class="content">
<div class="section">
非浮动元素
</div>
<div class="section">
非浮动元素
</div>
<div class="section">
非浮动元素
</div>
<div class="section">
非浮动元素
</div>
<div class="section">
非浮动元素
</div>
<div class="item">
浮动元素
</div>
<div class="item">
浮动元素
</div>
<div class="item">
浮动元素
</div>
<div class="item">
浮动元素
</div>
<div class="item">
浮动元素
</div>
<div class="item">
浮动元素
</div>
<div class="item">
浮动元素
</div>
<div class="item">
浮动元素
</div>
</div>
<div class="after-box div" style="padding:1em;">
sdfsfffffdddddddddddddddd
sdfsfffffdddddddddddddddd
sdfsfffffdddddddddddddddd
sdfsfffffdddddddddddddddd
</div>
</div>
</body>
</html>解决方案
使用下面css把浮动清除就可以了：
.content:after {
display: block;
line-height: 0;
content: '.';
font-size: 0;
overflow: hidden;
clear: both;
}这篇关于css - 在某个div中既有float元素，又有非float元素， 但是float元素逃离了附div。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
