您的位置：首页 > 其它

浮动为何不能撑起父容器

2014-06-25 22:40 239 查看

浮动float属相是我们在网页布局中最经常使用的一个属性，给我们带来很的丰富的布局样式，但是如果不对其作深入了解，可能会对我们的网页布局出现一些意想不到问题

下面我们例子来说明，上代码：

<style type="text/css">

.main { //设置父容器的属性

width: 100%;

padding: 100px 20px;

border: 1px solid green; //设置父容器的边框颜色为绿色,便于区分

}

.left {

width: 40%;

height: 300px;

border: 1px solid black; //左边浮动框边框设置为黑色

}

.right {

width: 50%;

height: 300px;

border: 1px solid red; //右边浮动框边框设置为红色

}

.fl {

float: left;

display: inline; //解决ie浏览器的双margin问题

}

.right {

float: right;

display: inline;

}

</style>

<body>

<div class="main"> //父容器

<div class="left fl"></div> //左边子容器

<div class="right fr"></div> //右边子容器

</div>

</body>

显示图片如下

原因解释：浮动元素是脱离文档流的，所以它根本不能撑起所在父容器的高度；解决的方法有两种，第一种是加一个div，将其设置属性的clear：both即可，当然这里我们可以用伪类来解决。

为main加一个伪类

.main::after {

content: ',';

height: 0;

display: block;

visibility: hidden;

clear: both;

}

效果如图所示

这样就达到了当初预想的结果，其实如果我们到京东或者其他的网站用firefox查看可以看到clearfix这个类选择器，其实这个就是用来清楚浮动的；

另外还介绍一个用伪类可以做出其他很炫的效果的http://blog.mukispace.com/pseudo-elements-10-examples/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航