当前位置: 萬仟网 > IT编程>网页制作>CSS > 那些年使用过的清除浮动的方法

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

2019年04月13日 07:23  | 萬仟网IT编程  | 我要评论

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

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

这段代码:

  <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">111</li>
    <li class="left">222</li>
    <li class="left">333</li>
  </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">111</li> <li class="left">222</li> <li class="left">333</li> </ul> <div class="clear"></div> <div class="div1">这是div1</div> <div class="div2">这是div2</div> <div class="div3">这是div3</div> </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">111</li>
    <li class="left">222</li>
    <li class="left">333</li>
  </ul>
  <div class="div1">这是div1</div>
  <div class="div2">这是div2</div>
  <div class="div3">这是div3</div>
</div>

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • VueRouter认识

    1、 什么是路由? 注意:作为vue的插件,需要单独引入js文件,且必须在vue.js之后引入。 <router-link to=“跳转路径”... [阅读全文]
  • 零基础:如何快速学习JavaScript,html+css技术

    前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML、CSS和JavaScript这些基础知识点,但达妹今天想强调一下,学前端开发除了要学这些... [阅读全文]
  • Web基础--HTML、Css

    Web基础--HTML、Css

    一、Web项目(可跳过,直接从下一个标题开始) 1、Web项目: 指的是带网页的项目,通过浏览器可以访问的项目。比如:淘宝、天猫等。 2、Web项目... [阅读全文]
  • CSS是什么

    css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标... [阅读全文]
  • vue初级使用

    一、Vue是什么? Vue(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vu... [阅读全文]
  • HTML连载21-序选择器上

    HTML连载21-序选择器上

    解释CSS3 中新增的选择器中最具有代表性的就是序选择器,大致可以分为两类: (1)同级别的第几个(2)同类型的第几个 先写一个公共代码 1.选中同... [阅读全文]
  • 哪些技术会决定前端开发者的未来发展?

    哪些技术会决定前端开发者的未来发展?

    2019年下半年即将到来,上半年狂风骤雨般的裁员浪潮让每一位从业者背脊发凉,在经历了五六年黄金发展期之后,前端开发这个行业似乎也进入了转折点。 我一... [阅读全文]
  • 关于阿里 iconfont 的使用步骤

    关于阿里 iconfont 的使用步骤

    第一步: 在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去 第二步: 在项目中,可以看到刚刚加入的图标,... [阅读全文]
  • flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看... [阅读全文]
  • web前端布局HTML+CSS

    web前端布局HTML+CSS

    1、W3C标准 万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Pr... [阅读全文]

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com