float你真的懂了吗

什么是CSS浮动?引用W3School中的解释:

1 浮动的框可以向左或者向右移动,知道外边缘碰到包含框或者其他浮动框的边框

2 浮动框不在普通的文档流中,所以文档普通流中的框块表现的就像浮动框不存在一样

我们看一个栗子,PLUNKER

现在我们为div1加上浮动样式 float = right

可以看到div2顶替了div1原来的位置。

这时如果我们把div浮动到右边来,div1 和div2之间会发生什么呢?

试一试


可以看到div1 完全覆盖了div2. 这时由于div2是浮动框,它脱离了普通的文档流。

CSS最初为什么需要float这个样式呢? 最初是为了实现文字环绕图像这样的布局,看一个栗子,PLUNKER


我们将div设置为float=left。就做成了这种文字环绕图片的布局。这个由于浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

如果想阻止行框被缩短,需要使用clear属性。

那么float+clear到底有什么实际用处呢?还是先看一个栗子吧 我们做一个水平定义列表 PLUNKER

一步步来,先做一个最基础的定义列表,效果就是这样了:


分析分析差别,标题需要加粗,右对齐,好像还有一定长度。

所以,加入CSS

dl {
  margin-top:0;
}

dd,
dt {
  margin-left:0;
}

dt {
  font-weight:bold;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align:right;
}
看看效果:



恩,感觉不大像。不过如果我们可以给标题加上float的话,似乎。。

dl {
  margin-top:0;
}

dd {
  margin-left:140px;
}

dt {
  margin-left:0;
  font-weight:bold;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align:right;
  float:left;
}
效果如下

哈哈 效果不就有了嘛。

其实这个效果就是bootstrap3中的水平列表的一个简单实现。所以说bootstrap也是挺简单的嘛。

不过一切都离不开细节。对比一下我们的实现和bootstrap,你会发现bootstrap多了一个设置

clear: left;
为什么要设置这个呢?

如果我们删除第一个标题的内容:

看看,乱了吧。

试着加上clear:left

此时又恢复了正常的格式。

所以说我们要多读读源代码,既要有整体把握,也得注重细节。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值