css清除浮动clearfix：after

wh469012917 发布于2019-08-30 15:52 / 497人阅读

摘要：加入的这个元素转换为块级元素。清除左右两边浮动。可见度设为隐藏。注意它和是有区别的。仍然占据空间，只是看不到而已行高为高度为字体大小为这是针对于的，因为不支持伪类，这个神奇的让的元素可以清除浮动来包裹内部元素。

如果外部有一个div容器，内部div设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开外部div。




.clearfix:after {
    content: ".";     /*内容为“.”就是一个英文的句号而已。也可以不写。*/
    
    display: block;   /*加入的这个元素转换为块级元素。*/
    
    clear: both;     /*清除左右两边浮动。*/
    
    visibility: hidden;      /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/
    
    line-height: 0;    /*行高为0；*/
    
    height: 0;     /*高度为0；*/
    
    font-size:0;    /*字体大小为0；*/
}

.clearfix { *zoom:1;}   /*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/

云服务器 GPU云服务器清除浮动浮动-前端-css clearfix after()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116517.html

深入css布局 (2) — 定位与浮动

摘要：深入布局定位与浮动在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。定位后，原来在文档流中占据的位置，会被其他元素所占据。清除浮动的特殊应用清除浮动可以解决父元素高度塌陷问题。深入css布局(2) — 定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深...

Crazy_Coder 2019-04-23 13:42 评论0 收藏0
CSS-清除浮动

摘要：清除浮动方法方法一使用带属性的空元素在浮动元素后使用一个空元素如，并在中赋予属性即可清理浮动。什么是CSS清除浮动？在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象...

刘厚水 2019-08-30 12:54 评论0 收藏0
清除浮动

摘要：还有几种乱七八糟的清除浮动方法，但是缺点多，故不提起，了解可参考浮动的目的：把多个盒子放在一行上清除浮动的目的：解决父盒子高度为0的问题清除浮动，也称闭合浮动注：本文不兼容IE6 未清除浮动实现情况：清除后：原代码： DOCTYPE html> 清除浮动 .content{ width:960px; margin:100px auto; border: 1px solid ...

zhisheng 2019-04-23 13:42 评论0 收藏0
浅谈 CSS 清除浮动的 6 种方法

摘要：如果要解决可以参考前面的办法。例如父元素处于绝对定位与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。额外标签法使用:after 伪元素给父元素定高利用overflow:hidden;属性父元素浮动父元素处于绝对定位在开发网页的时候经常需要用到各种浮动，此时便需要及时的清除浮动，否则将会导致布局出现问题引出问...

WalkerXu 2019-08-28 18:20 评论0 收藏0
前端面试题-clearfix（清除浮动）

摘要：一浮动的概念浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。一、浮动的概念浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。二、浮动的影响 1. 浮动会导致父元...

luckyw 2019-08-30 14:08 评论0 收藏0