`
zhangyaochun
  • 浏览: 2613053 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

清除浮动的一种方式

clearfix 
阅读更多

贴一个自己用的比较多的清除浮动的代码：

 

.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix {height: 1%;} 
.clearfix {display: block;}
 
分享到：
| html5之Video事件api探究
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css中3种清除浮动方法

    Flexbox是现代CSS布局的一种方式，它可以自动处理子元素的排列和对齐，包括清除浮动。在Flexbox布局下，父元素只需设置`display: flex;`，子元素的浮动就不会影响到父元素的高度。 ```css .container { display...

    HTML5 清除浮动

    清除浮动主要有以下几种方式： 1. 使用CSS的`clear`属性：我们可以给后续元素设置`clear:both`，这将强制该元素不与任何浮动元素相邻接。例如： ```css .clear-fix { clear: both; } ``` 然后在HTML中添加一...

    清除浮动动态演示.html

    浮动的属性虽然方便使用，但是在使用这种属性时，也存在着一种弊端，那就是当子元素设置了float属性之后，且父元素的宽度没有设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0)。...

    清除浮动示例_xiongxiong.html

    浮动的属性虽然方便使用，但是在使用这种属性时，也存在着一种弊端，那就是当子元素设置了float属性之后，且父元素的宽度没有设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0)。...

    xhtml+css清除浮动的3种方法

    这种方法是最直观的一种方式，它通过在浮动元素后面添加一个额外的空标签（通常是`<div>`），并设置`clear:both`来清除浮动的影响。例如： ```css .clear { clear: both; height: 0; font-size: 0; overflow: ...

    清除浮动的几种方法PPT学习教案.pptx

    建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。 3. 父级div定义伪类:after和zoom 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题。优点：...

    清除浮动.pdf

    - 另一种方法是利用`:after`伪元素，创建一个看不见的元素来清除浮动。例如，`content: " "; clear: both; display: block;`。这种方法保持了HTML的整洁，但需要对不支持`:after`的旧版IE进行hack。 2. **设置`...

    CSS技术：清除浮动的最优方法.pdf

    4. **使用伪元素清除浮动** - 另一种技术是在父元素中使用`:after`伪元素，并利用CSS的 `content` 属性来生成一个内容为空的元素，并设置其 `clear` 属性。然后，将这个伪元素的 `display` 属性设置为 `block` 或 `...

    CSS清除浮动_2种方法源代码.zip

    Flexbox是CSS3引入的一种新的布局模式，它能更方便地处理容器内元素的对齐和分布，包括清除浮动。以下是一个使用Flexbox清除浮动的示例： ```css .container { display: flex; flex-wrap: wrap; } .float-...

    css清除浮动的方法有哪些？.docx

    这是一种更为现代且优雅的解决方案，适用于支持CSS伪元素的浏览器。通过在浮动元素的容器上应用`:after`伪元素，创建一个看不见的块元素，以此清理浮动。CSS代码如下： ```css .clearfix:after { content: "020"; ...

    清除浮动.docx

    `display:inline-block`也是一种触发`layout`的方法，但在标准浏览器中可能需要恢复为默认的`display`值以保持兼容性。 5. **浮动父元素** 让父元素也浮动，但这可能导致其他布局问题，因为浮动元素可能会离开其...

    css 完美清除浮动的两种解决方案

    本文将介绍两种常见的清除浮动的方法：使用`clear:both`和使用伪元素。 1. **使用`clear:both`** 在HTML中，我们可以创建一个空的`div`元素，并为其添加`clear:both`样式。这种方法简单直接，但可能会增加额外的...

    清理浮动的几种方法

    浮动布局在CSS中是一种经典而基础的布局方式，它允许元素在页面中向左或向右浮动，使得其他内容能够环绕其展示。然而，浮动元素的一个常见问题是它们可能导致父容器的高度无法正确计算，进而影响后续元素的布局。这...

    Float浮动与清除浮动

    清除浮动主要有以下几种方法： 1. 给父元素设置固定高度：这种方法简单直接，但适用于高度固定的布局，对于高度自适应的页面则不适用。 2. 使用`overflow`属性：通过设置`overflow: hidden`，可以触发父元素成为BFC...

    CSS:清除浮动的最优方法

    另外，文中还提到了一种名为`clearfix`的清除浮动方法，它利用CSS伪元素`:after`和`clear:both`来创建一个看不见的元素来清除浮动，这种方法适用于不支持`overflow`属性清除浮动的旧版本浏览器。 总的来说，`...

    css清除浮动的几种方法以及对应规范说明

    以下是对清除浮动的几种方法及其规范说明的详细解释： 1. **使用`clear:both`** 当一个元素设置`clear:both`时，这个元素会向下移动，直到它不在与任何浮动元素相邻。这通常用于浮动元素之后的非浮动元素，或者在...

    css清除浮动

    另一种常用的清除浮动方法是通过设置容器的`overflow`属性为`hidden`或`auto`。这种方法不需要额外的HTML标记，而且兼容性良好，但在某些老版本的IE浏览器中可能需要加上`*zoom:1`来触发“hasLayout”，以确保正确...

    CSS3 清除浮动的方法示例

    - (1) 使用`clear: both`: 这是一种常见的方式，通过在父元素内部添加一个无内容的元素，并设置`clear: both`，使得该元素之后的内容不再环绕浮动元素。 - (2) 设置父元素的`overflow: auto/hidden`: 这会触发...

Magicbox
Global site tag (gtag.js) - Google Analytics