在这个代码中为什么添上overflow:hidden后wrap就有高度了?

来源:11-8 Responsive设计——不同设备的分辨率设置

weibo_e_狼传说_0

2016-11-16 22:11

11-8这一张的代码.因为取消掉它就没有了自带的green背景了


代码如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>columns</title>

<link href="style.css" rel="stylesheet" type="text/css">

<style>


.wrapper{

  width: 100%;

  background: green;

  max-width: 980px;

  /*overflow: hidden;*/

  margin-left: auto;

  margin-right: auto;

  border:5px solid red;

}

.left {

  float: left;

  width: 20%;

  background: orange;

  min-height: 100px;

}


.content {

  float: right;

  width: 78%;

  background: blue;

  min-height: 100px;

}

@media (max-width: 480px) {

  .wrapper {

    min-width: 320px;

    width: 98%;

    margin-left: 1%;

    margin-right: 1%;

  }

  .left {

    float: none;

    width: 100%;

  }

  .content{

    float: none;

    width: 100%;

  }

}

</style>

</head>

<body>

<div class="wrapper">

  <div class="left"></div>

  <div class="content"></div>

</div>

</body>

</html>


写回答 关注

2回答

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242556 学习 · 2623 问题

查看课程

相似问题