firefox不显示border通过清除float便可解决

要让问题更加清晰，我们先来分析一下具体的情况：

• 场景：在 Firefox 浏览器中使用 border-radius 给一个 div 添加圆角样式，但边框（border）不显示（无边框）。
• 原因：该元素的子元素采用了浮动（float）布局，并且没有被清除，导致父元素没有正常地包裹子元素，因此边框无法正常显示。

那么，如何解决这个问题呢？

一个简单而有效的解决方法是，清除子元素的浮动。以下是两种常见的清除浮动方法：

方法一：使用空标签清除浮动

在子元素（或最后一个浮动元素）后面添加一个空标签 <div style="clear:both;"></div>。

可以在 CSS 中定义一个类 .clearfix，用于清除浮动。该类的样式可以设置为：

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    zoom: 1;
}

这里使用 :after 伪元素在元素末尾添加了一个空标签，并设置 display:block 属性和 clear:both 属性，来清除子元素的浮动效果。visibility:hidden 属性是为了隐藏这个空标签，实际上这个标签是在页面中存在的。

使用中，只需在子元素的父元素上加上 .clearfix 类即可：

<div class="parent clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

方法二：使用父元素的伪元素清除浮动

在父元素上添加 :after 伪元素，并设置 clear 属性为 both，实现清除子元素的浮动效果。代码如下：

.parent:after {
    content: "";
    display: block;
    clear: both;
}

使用中，只需在子元素的父元素上加上 :after 伪元素即可：

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

完成上述操作后，就可以在 Firefox 浏览器中正常显示边框了。