[原创]包裹float的div容器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script></script>
<style type="text/css">
div {
border: 1px solid red;
}
* {
box-sizing: border-box;
}
.container {
width: 1170px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-6 {
width: 50%;
}
.col-xs-1 {
width: 8.33333%;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
/*float的div不能够撑起来包含他的div，所以要用在容器div，row中的后面加上内容，并且是块级元素的显示，清除上面的浮动*/
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
6666<br />66
</div>
<div class="col-xs-1">
1111
</div>
</div>
</div>
</body>
</html>
