清除浮动

最新推荐文章于 2022-05-18 20:19:41 发布

原创最新推荐文章于 2022-05-18 20:19:41 发布 · 129 阅读

CC 4.0 BY-SA版权

浮动元素对父级和兄弟级元素造成的影响：父级会坍塌，虽然不会超过兄弟块的最低上界，但是会使后面快的内容浮动在它的周围。
1.清除浮动：
浮动元素会自动设置为块级元素，块级元素能设置宽和高，而行内元素则不可以
clear：left/right/both；不允许元素的哪一侧不允许存在其他浮动元素。
float会影响别的元素：1如果是附近是块级元素，则会覆盖块级元素，（记住覆盖两个字）
2.如果附近是行内元素，则行内元素会浮在周围，为浮动元素留有空间,就算浮动元素遮盖掉一个块级元素，那么块级元素内的文字也会浮动在浮动元素周围。这样可以做css2的三栏布局。
3.浮动元素的父元素坍塌！！（属于子元素都是浮动元素，所以要加个<div clear：both>清除浮动）
至于清楚浮动，影响的只是浮动元素本身，而且并没有清楚本身的float元素，只是换了种情况。
例如div1，div2都是左浮动，则div2会在1的左边，此时如果对div2进行clear：left，意思是不允许div2左边有浮动元素，但因div1又是浮动的，又不能覆盖它，所以div2只能换行，去了div1的下面，这样左边既没有浮动元素，又没有覆盖div1.
右浮动同理
2.关于设置浮动后其他元素的显示情况
https://blog.youkuaiyun.com/tanga842428/article/details/77799951
3.clear:both的主要作用是撑开父元素？因为独占一行？又能清除浮动又能撑开父元素。这样就也是占位的一种方式。该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。即既不影响旁边的元素，又能左浮动。
当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。
常见的几种方式：
https://blog.youkuaiyun.com/Inuyasha1121/article/details/44815779
（1）

（2）.clearfix:after {
content: “.”; //为元素的内容为空，则不能显示在页面当中
display: block;//设置为块级元素，相当于兄弟元素，若为浮动元素后面的兄弟元素，则清除浮动时会自动换行到下一行，这样浮动元素就独占一行，就会把内容撑开。
height: 0;//设置高度为0，为了不破坏布局。
clear: both;//清除为元素周围的浮动。
visibility: hidden; //不让内容.显示在页面上
}

/*需要对父级*/

这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素(display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.

但是,IE并不支持.所以如果你需要兼容IE浏览器的话,可以设定以个Hack.
（3）
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}