为什么wrap中要加float:left左浮动（源自：HTML+CSS基础课程 15-5）
|
一开始我一直在想玩什么wrap要加上float:left，不加会怎么样？然后尝试着不加float:left，结果发现如果不加就不会出现居中效果，会跟一开始一样文字在最左边。 后来反复试验，终于有点理解为什么要加上float:left，不过我自己不太能表达出来，简单来说，我个人理解就是： 如果不加float:left，因为div class="wrap"是块状元素，所以是独占一行的，文字后面延伸到浏览器最右侧，导致这个div class="wrap"里面的元素（指div class="wrap-center"）也是延伸到浏览器最右侧的，假设div class="wrap"的宽度是100，那么div class="wrap-center"的宽度也是100，所以前面所说的，在wrap里面用left:50%往右移动50%，然后又在wrap-center里面用left:-50%，因为wrap和wrap-center宽度是相等的，导致它们抵消了，所以最后不会出现任何居中效果。 然而，如果在wrap里面加了float:left，意思就是左浮动，根据前面第12章里面所说的浮动模型的特征，wrap是不能独占一行的，wrap如果加了左浮动，然后里面又嵌套有其他元素的话(这里指wrap-center)，第一个重点来了：wrap将会在“我们来学习一下这种方法。”这句话之后把wrap-center放进去，也就是说“我们来学习一下这种方法。”这句话后面不会出现可以一直延伸到浏览器最右侧的空白，而是出现了wrap-center。而且第二个重点也来了：就是wrap-center的宽度会跟wrap的宽度保持一致(当然这里是指wrap-center里面没有指定width而是保持默认的情况下)。 此时，假设“我们来学习一下这种方法。”这段话的长度为10，那么wrap-center的长度就是10，此时再在wrap-center里面用left:-50%，就是往左移动-50%，大家脑补一下，这个时候就实现了把这段文字居中的效果。到现在我们可以看到，之前是根据wrap的长度100移动了50%，后来是根据wrap-center，其实就是“我们来学习一下这种方法。”这段文字的长度移动了-50%。这就是原理。 不知道大家看懂没，我是尽力了。。。 |
免责声明：本内容仅代表回答会员见解不代表天盟观点，请谨慎对待。
版权声明：作者保留权利，不代表天盟立场。
|
|
|
|
|
|
|
|
|
我觉得，如果你用代码来写，会更容易让人看懂。。。还有，如果你要wrap居中的话，给他父元素一个width，给他一个width，然后margin：0 auto；就能实现了~ |
|
|
|
|
|
|
|
|
天盟APP下载
