1
<div text-align:center>
<div float:left>左侧内容</div>
居中字体
</div>
这种情况下,即使外部div使用了 文本对其的居中方式。左侧内容也使用了float。
但是在计算居中时,仍然会减去浮动区域的宽度。在剩下的区域内进行一个居中。
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
background-color: darkgrey;
}
.d2{
float:left;
height: 100px;
}
.d3{
clear: both;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
11111111111
</div>
<div class="d3">
</div>
</div>
</body>
</html>
内部div设置 浮动之后,一般情况下 外部div因为内部div的浮动,他会里头没有内容,不显示外部div的一些属性,所以为了维持外部div的属性(比如需要内部内容高度决定外部内容高度)。 需要在内部加一个空的div,然后设置清除浮动,之后外部的div就正常的显示了出来。
这种情况适用于 外部需要不浮动设置居中等,但是内部都是浮动的,加一个就可以让外部不设置浮动的情况下也可以设置一些属性。不用再为外部设置浮动。
原理就是 内部元素如果都是浮动,最后一个元素清除浮动,那么他的位置肯定就是在正常显示那些浮动元素的下边,这样整个布局就出来了。外部的div也就可以正常显示出来了。
此外还有一种方法。
外部div不浮动,内部元素浮动。外部不会显示出内容。
那么需要在外部div 中加一个
overflow:hidden
就可以正常显示外部的div
原理 众说纷纭,我感觉是他会隐藏超出部分,他没有内容隐藏谁?就把宽高扩展到里头浮动元素占据的空间。
网上的2说法:
1overflow:hidden触发了block formatting context所以他的边框不会和浮动的box重叠,就达到了清除浮动的目的,缺点当然就是overflow:hidden本身了,比如你需要滚动条,或者有绝对定位的子元素在外边。
2是因为overflow除了(visible)会重新给他里面的元素建立块级格式化(block formatting context)floats, position absolute, inline-block, table-cell和table-caption都不是块级样式,所以才会用到clear来控制浮动overflow也可以清除浮动是因为当在父级元素设置overflow时候,除了visible,就是只有auto, hidden或者scroll时候,也会建立新的块级格式给他的子元素, 从而起到清楚浮动效果具体信息可以在这里看虽然clear是旧的方式,但还是推荐用clear来做,有些情况会比overflow处理的要好
(但是会造成一些情况 也就是内部的一些div 在移动位置之后超出了范围,会造成隐藏效果。但是有的时候不想隐藏起来。就不能用overflow:hidden。 比如 guanwang2.0里最下边的4个图片移动位置后发现超出的位置隐藏起来了,取消掉外部的overflow就好了)
overflow hidden并没有之前理解错误的那个 跟clear both 一样的效果。之前错误的以为可以加一个直接清楚之前元素的浮动。跟clear一个效果。其实没有。网上说的清楚浮动就是清除内部的浮动。
此外overflow还有一个效果。 两个div,第一个divfloat,第二个div不float得情况下。因为第一个div浮动了所以。第二个div的长度是外层父元素的长度。给第二个div一个overflowhidden之后,第二个div的长度就会自动变成父元素长度减去第一个div的长度。大概也就是overflowhidden会隐藏前面div的长度,也差不多是不会和浮动box叠加。
还有方法是
- 1
- .cf:before, .cf:after {
- content:"";
- display:table;
- }
- .cf:after {
clear:both;
}
- .cf {zoom:1;
} - 2
- <style type=”text/css”>
- <!–
- *{margin:0;padding:0;}
- body{font:36px bold; color:#F00; text-align:center;}
- #layout{background:#FF9;}
- #layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
- #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
- #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
- –>
- </style>
- <div id=”layout”>
- <div id=”left”>Left</div>
- <div id=”right”>Right</div>
- </div>
- 使用after伪对象清除浮动。 该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像 素;二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的。
这两个都可以达到效果,原理差不多。
zoom据说也可以达到清除内部浮动的效果。
虽然说在下边的div中 clear一下就可以解决上方div无宽高(内部元素都浮动)的问题,但是想要div内部既浮动元素而且这个div又不设置float,能显示出宽高的方法就有上边的几种。虽然说给外部div设置float之后 就会显示出宽高,因为层数相同了就填充了。但是有的时候需要设置margin 等等之类的 float之后失效的属性,就要用这种方法。
3.写的时候考虑一下布局问题,是横向布局还是竖向布局 实现简单。
相同样式的时候,只写一个,然后直接套用样式就OK
4.letter spacing+ text:align 会导致不能居中,是因为最后一个字边也有一块 空白的spacing,可以使用 text-indent 缩进 或者是加一个padding right 来达到字体完全居中的效果