html样式继承问题,子元素没有继承父元素的边框

两个小的DIV同在一个大DIV内,为什么第二个DIV没有父级的边框?
图片描述
html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>最新动态排版</title>
<link rel="stylesheet" href="css/test_test_new.css">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="new_center">
    <div class="new_head">
        最新动态
    </div>

    <div class="new_list">
       <div class="new_list_one">
       <div class="new_list_title">发表新贴<a href="javascript:void(0)">【主板信息披露业务备忘录第10号:重大资产组媒体说明会】</a></div>
             <div class="new_list_time">
                 08-12 13:48
             </div>
       </div>
       <div class="new_list_one">
       <div class="new_list_title">发表新贴<a href="javascript:void(0)">【主板信息披露业务备忘录第10号:重大资产组媒体说明会】</a></div>
             <div class="new_list_time">
                 08-12 13:48
             </div>
       </div>
       <div class="new_list_one">
       <div class="new_list_title">发表新贴<a href="javascript:void(0)">【主板信息披露业务备忘录第10号:重大资产组媒体说明会】</a></div>
             <div class="new_list_time">
                 08-12 13:48
             </div>
       </div>
    </div>
</div>
</body>
</html>

css部分

*{padding:0; margin: 0;}
body{
    background: #f6f6f8;
    font-size:16px;
    font-family: "微软雅黑",'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.fl{float:left;}
.fr{float:right;}
li{ list-style-type: none;}
a{text-decoration: none; color:#333;}
a:hover{color:#235590;}
.hidden{display: none;}
.new_center{width:822px;background: #fff;height: auto;border:1px solid red; margin:30px;}
.new_head{font-size: 16px;padding:16px;border-bottom: 1px solid #e4e4e4;}
.new_list{width: 822px;}
.new_list_one{float: left;background: #fff;width: 100%;    padding: 18px 0;border-bottom: 1px solid #e4e4e4;}
.new_list_title{font-size: 16px;width: 650px; overflow: hidden; float: left;text-indent: 50px;}
.new_list_time{float: right;font-size: 14px;color: #b7b7b7;margin-right: 20px;}
.new_list_title a{color:#3366cc;}
阅读 6.1k
2 个回答

float样式破坏队形了,尽量少用这玩意
你的 <div class="new_list">高度为0,相当于边框只包裹了一个最新动态
多使用其他标签,比如span

.new_list内的.new_list_one为float属性,脱离了文档流(漂起来了),所有没有把.new_list撑起。
此时.new_list的高度为0px,.new_list_one盖住了底边框。
解决方法:.new_list 加overflow: hidden即可。
.new_list {

overflow: hidden;

}

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题