那些年使用过的清除浮动的方法

AbnerMing 发布于2019-04-23 11:40 / 3170人阅读

摘要：浮动使元素框向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离了文档的普通流，所以文档的普通流中的框表现得就像浮动框不存在一样。

浮动使元素框向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框脱离了文档的普通流，所以文档的普通流中的框表现得就像浮动框不存在一样。

这段代码：

  <style>
    .parent {
      width: 500px;
      margin: 0 auto;
    }
    .left {
      float: left;
      list-style: none;
      padding-right: 5px;
    }
  style>

<div class="parent">
  <ul class="div0">
    <li class="left">111li>
    <li class="left">222li>
    <li class="left">333li>
  ul>
  <div class="div1">这是第一个内容div>
  <div class="div2">这是第二个内容div>
  <div class="div3">这是第二个内容div>
div>

对三个li进行左浮动。我们预想的是div0的内容在同一行显示，其他的各自展示在一行中。然而事实是，div1紧跟在div0后，这便是浮动造成的影响。

浮动解决方法：

1、浮动元素父级设高法

也就是给div0设置一个高度。来看看效果：

.div0 { height: 30px; }

很好的解决了问题，不过平时我们在使用中不能精确的得出元素的高度，所以这个方法不太实用。

2、空div清除浮动

也就是给浮动元素后面加一个空的div标签，设置clear属性来清除浮动：

<style>
  .clear { clear: both }
style>

<div class="parent">
  <ul class="div0">
    <li class="left">111li>
    <li class="left">222li>
    <li class="left">333li>
  ul>
  <div class="clear">div>
  <div class="div1">这是div1div>
  <div class="div2">这是div2div>
  <div class="div3">这是div3div>
div>

clear 属性定义了元素的哪边不允许出现浮动元素,这里也可以设置为clear: left。在这里直接给div1一个clear样式能起到同样的效果。

3、浮动元素父级设overflow:hidden/auto法

和第一种方法一样，只需要给div0加一个overflow属性：

.div0 {
  overflow: hidden;
  *zoom: 1 // 兼容ie7/6,*号表示只在ie7以下版本生效
}

overflow本意是对溢出元素框的内容做处理。在这里用，刚好可以撑开父元素的高度。

4、浮动元素父级设display:inline-block

.div0 { display: inline-block}

这种方式有种缺点，会使margin: 0 auto居中方式失效。

给div0增加一个宽度并且设置居中,并且用上面三种方式之一清除浮动后效果是这样:

   .div0 {
      overflow: auto;   //清除浮动
      width: 100px;
      margin: 0 auto;  // 居中
    }

但是使用display: inline-block清除浮动，margin居中失效：

   .div0 {
      display: inline-block;   //清除浮动
      width: 100px;
      margin: 0 auto;  // 居中
    }

5、伪类after清除浮动法

目前最常用也最好用的清除浮动方法。ie需要设置zoom触发hasLayout。

<style>
   .clearFix {
      *zoom: 1
    }

    .clearFix:after {
      display: block;
      content: "";
      width: 0;
      height: 0;
      font-size: 0;
      clear: both;
      visibility: hidden;
      overflow: hidden
    }
style>

<div class="parent">
  <ul class="div0 clearFix">
    <li class="left">111li>
    <li class="left">222li>
    <li class="left">333li>
  ul>
  <div class="div1">这是div1div>
  <div class="div2">这是div2div>
  <div class="div3">这是div3div>
div>

GPU云服务器云服务器的清除方法清除浮动 php抽象方法的使用 vmware的使用方法

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

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

那些年使用过的清除浮动的方法

摘要：浮动使元素框向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离了文档的普通流，所以文档的普通流中的框表现得就像浮动框不存在一样。浮动使元素框向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离了文档的普通流，所以文档的普通流中的框表现得就像浮动框不存在一样。这段代码： style .parent { width:...

wqj97 2019-04-22 16:12 评论0 收藏0
理解CSS浮动与清理

摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。本文主要讨论以下几个问题：1.浮动的原始用途...

Tonny 2019-08-29 12:23 评论0 收藏0
理解CSS浮动与清理

摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。本文主要讨论以下几个问题：1.浮动的原始用途...

cyqian 2019-08-01 16:39 评论0 收藏0
浮动与浮动的清除

摘要：一浮动一浮动说浮动就必须提及一下文档流，当中的元素按照从左到右，从上到下的顺序进行排列称之为文档流，也就是正常排列。一、浮动说浮动就必须提及一下文档流，HTML当中的元素按照从左到右，从上到下的顺序进行排列称之为文档流，也就是正常排列。而浮动是什么呢？浮动会让元素脱离文档流，假如A元素浮动了，原本排在该元素之后的元素发现A元素不在这个文档流了，就会无视它往上接到A元素前面的元素之后(PS...

Chao 2019-04-23 13:34 评论0 收藏0