您的位置：首页 > 其它

2017.9.15 清除浮动的原理和方法

2017-09-15 21:18 190 查看
 


伪类:after清除浮动的原理和方法

浮动元素容器的clearing问题

1. 问题的由来
有这样一种情形：在一个容器（container）中，有两个浮动的子元素。
<div>
        <div style="float:left;width:45%;"></div>
        <div style="float:right;width:45%;"></div>
</div>
在浏览器中一运行，就会出现意想不到的结果。实际视图是子元素显示在父容器的外部。
2. 问题的原因与浮动定位有关。
在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。

3.解决方法一：添加空元素
经典的解决方法，就是在浮动元素下方添加一个非浮动元素。
代码这样写：
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div>
原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。

4.解决方法二：浮动的父容器
另一种思路是，索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动了。
<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。

5.解决方法三：浮动元素的自动clearing
让父容器变得可以自动"清理"（clearing）子元素的浮动，从而能够识别出浮动子元素的位置，不会出现显示上的差错。

要做到这点，只要为父容器加上一条"overflow: hidden"的CSS语句就行了。关于为何父容器可以自动识别：由于加上overflow:hidden之后要计算超出的大小来隐藏，所以父容器会自动撑开自己把所有的子元素放进去，同时会计算浮动的子元素。

代码这样写：
<div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
这种方法的缺点主要有二个，一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

6.解决方法四：能不能通过CSS语句添加子元素呢，这样就不用修改HTML代码了？
回答是可以的，我们知道CSS语句中有一个:after伪选择符，就可以在父容器的尾部自动创建一个子元素，这正好符合我们的需要。
下面的代码参照了lifesinger的写法：
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
"clearfix"是父容器的class名称，"content:"020";"是在父容器的结尾处放一个空白字符，"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。
但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。

7.最终代码
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}

8.附录 什么是hasLayout
IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。
在默认情况下，拥有L
e459
ayout的元素包括：
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
（注意，<p>和<div>默认不拥有Layout。）
凡是具有以下CSS属性的元素，也会拥有布局：
position: absolute
float: left|right
display: inline-block
width: any value other than 'auto'
height: any value other than 'auto'
zoom: any value other than 'normal' （IE专用属性）
writing-mode: tb-rl（IE专用属性）
overflow: hidden|scroll|auto（只对IE 7及以上版本有效）
overflow-x|-y: hidden|scroll|auto（只对IE 7及以上版本有效）

hasLayout是IE特有的属性，不是CSS属性。可以用JavaScript函数hasLayout查看一个元素是否拥有Layout。如果有，这个函数就返回true；否则返回false。hasLayout是一个只读属性，所以无法使用Javascript进行设置。

但是  before  after属于伪元素  他和伪选择器怎么区分呢   用例子说明比较简单 下面的是我在网上找的
https://segmentfault.com/a/1190000000484493  

这是链接


CSS 属性 - 伪类和伪元素的区别

首先，阅读 
w3c
 对两者的定义：
CSS
 伪类用于向某些选择器添加特殊的效果。
CSS
 伪元素用于将特殊的效果添加到某些选择器。
可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 
css
 无法描述的东西。


伪类种类




伪元素种类




区别

这里用伪类 
:first-child
 和伪元素 
:first-letter
 来进行比较。
p>i:first-child {color: red}
<p>
<i>first</i>
<i>second</i>
</p>



 //伪类 
:first-child
 添加样式到第一个子元素

如果我们不使用伪类，而希望达到上述效果，可以这样做：
.first-child {color: red}
<p>
<i class="first-child">first</i>
<i>second</i>
</p>

即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素：
p:first-letter {color: red}
<p>I am stephen lee.</p>



 //伪元素 
:first-letter
 添加样式到第一个字母

那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？
.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>

即我们给第一个字母添加一个 
span
，然后给 
span
 增加样式。

两者的区别已经出来了。那就是：

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。


总结

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 
css3
 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
:Pseudo-classes
::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航