Against the war by the second week of class learning, summed up several solutions to highly collapsed.
Since the height of collapse is caused by the floating of the first-stage sub-elements parent element highly adaptive, thereby forming a collapsed height.
like this:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 600px;
height: auto;
border: 2px solid coral;
background:tomato ;
}
.box1{
width: 200px;
height: 200px;
background: turquoise;
float: left;
}
.box2{
width: 250px;
height: 250px;
background: pink;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
The solution There are five:
The first: fixed height to the parent element
of this approach can solve the collapsed height, but there is no highly adaptive way.
.box{
width: 600px;
height: 300px;
border: 2px solid coral;
background: tomato;
}
.box1{
width: 200px;
height: 200px;
background: turquoise;
float: left;
}
.box2{
width: 250px;
height: auto;
background: pink;
float: right;
}
The second: the parent element to add overflow: hidden; attribute
of this approach is the parent element BFC follow the rules.
.box{
width: 600px;
height: auto;
border: 2px solid coral;
background: tomato;
overflow: hidden;
}
Third: below the floating element with a space mark
this method will burden and cause structural redundancy codes.
Empty tags using the attributes, so that it clears itself floating, then set the height to 0, distraction parent element.
.box3{
clear: both;
height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
<div class="box2">
文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本文本文本文文本
</div>
<div class="box3">
</div>
</div>
Fourth: the parent elements are added to the display: table; attribute
of this method is to form an element having element attributes, but also changes the properties of the original parent element
.box{
width: 600px;
height: auto;
border: 2px solid coral;
background: tomato;
display: table;
}
Fifth: Universal clearance method
to the parent element itself set up a block element, so hidden.
.box{
width: 600px;
height: auto;
border: 2px solid coral;
background: tomato;
}
.box:after{
content:"";
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
These are highly adaptive method, but also solve the float highly adaptive approach.
