web前端知识杂记（1浮动占据居中空间）（2清楚内部的浮动效果）（3考虑布局）（4letter-spacing导致textalign不居中用text-indent解决）

最新推荐文章于 2024-02-12 11:15:05 发布

GOGOGOAAAA

最新推荐文章于 2024-02-12 11:15:05 发布

阅读量1.6k

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/qq_29469941/article/details/52467976

版权

h5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

居中字体

</div>

这种情况下，即使外部div使用了文本对其的居中方式。左侧内容也使用了float。

但是在计算居中时，仍然会减去浮动区域的宽度。在剩下的区域内进行一个居中。

<!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 来达到字体完全居中的效果

GOGOGOAAAA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端知识杂记（1浮动占据居中空间）（2清楚内部的浮动效果）（3考虑布局）（4letter-spacing导致textalign不居中用text-indent解决）

1左侧内容居中字体这种情况下，即使外部div使用了文本对其的居中方式。左侧内容也使用了float。但是在计算居中时，仍然会减去浮动区域的宽度。在剩下的区域内进行一个居中。2html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>
复制链接

扫一扫