首页 >web前端 >css教程 > 正文

清除浮动的css写法有哪些

原创2019-06-13 13:23:0602276

本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮动的实例代码,非常不错,具有一定的参考借鉴价值,,需要的朋友可以参考下

一、float(浮动)是什么

float 属性定义元素在哪个方向浮动。

float:left 元素向左浮动。

float:right 元素向右浮动。

float:none 默认值。元素不浮动,并会显示在其在文本中出现的位置。

float:inherit 规定应该从父元素继承 float 属性的值。

看一段简单的代码:

<div class="child1">左浮动</div>
<div class="child2">右浮动</div>
<div class="child3">喵</div>
  .child1 {
    float: left;
    height: 500px;
    width: 70%;
    background: #aa0;//黄
  }
  .child2 {
    float: right;
    height: 300px;
    width: 30%;
    background: #0aa;//青
  }
  .child3 {
    background: #a0a;//紫
  }

201904291427231.png

二、clear是什么

clear 属性指定段落的左侧或右侧不允许浮动的元素。

clear:left 在左侧不允许浮动元素。

clear:right 在右侧不允许浮动元素。

clear:both 在左右两侧均不允许浮动元素。

clear:none 默认值。允许浮动元素出现在两侧。

clear:inherit 规定应该从父元素继承 clear 属性的值。

比如上面的例子,我们为 child3 加上 clear: both; ,便可清除浮动。(child3的左右两侧都不允许浮动元素,自然而然不会再跟在俩浮动元素的屁股后面了~)

201904291427232.png

那么,只在一侧不允许浮动是怎样的呢?

本来是酱紫的:

那么,只在一侧不允许浮动是怎样的呢?
本来是酱紫的:
 
<div class="child1">child1右浮动</div>
<div class="child2">child2右浮动</div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...

  .child1 {
    float: right;
    background: #aa0;//黄
  }
  .child2 {
    float: right;
    background: #0aa;//青
  }

201904291427233.png

然后,为 child2 加上 clear: right; ,在child2的右侧不允许浮动元素,所以child2就飘到了下一行。

201904291427234.png

那么,为 child1 加上 clear: left; 的时候,为什么不起效果呢?在这留个小彩蛋,欢迎大家留言讨论~

三、浮动带来的影响

浮动带来的最大影响就是,当父元素只包含浮动的子元素的时候,父元素的高度就会塌陷( height 变为 0 )。

像酱紫:(parent高度为0,无法显示粉色背景)
<div class="parent">
    <div class="child1">child1右浮动</div>
    <div class="child2">child2右浮动</div>
</div>
  .parent {
    background: #FBC;//粉
  }

201904291427235.png

四、清除浮动的方式

1. 在父元素中的结尾加一个空 div

div

<div class="parent">
  <div class="child1">child1右浮动</div>
  <div class="child2">child2右浮动</div>
  <div style="clear: both;"></div>
</div>

  .child1 {
    float: right;
    background: #aa0;
  }
  .child2 {
    float: right;
    background: #0aa;
  }

201904291427246.png

可见,空 div 高度为0,位于父盒子的最下面,使父盒子重新撑起了应有的高度。

为什么要在最后加?倘若你在中间加,效果会是酱紫:

201904291427247.png

由于空 div 的左右都不允许浮动元素,那么它就会另起一段,导致盒子位置的效果就像 child2 清除右侧浮动一样, child2 跑到了 child1 下方。

2. 在父元素设置 overflow 属性

• 原理:设置 overflow:hidden 或 overflow:auto ,浏览器会自动检查浮动区域高度(才能知道父框的内容有无溢出)
• 优点:浏览器支持好
• 缺点:子元素若超出父元素尺寸会被隐藏,或者父元素出现滚动条

<div class="parent" style="overflow:hidden;">
  <div class="child1">child1右浮动</div>
  <div class="child2" style="position:relative;top:10px;">child2右浮动</div>
</div>

201904291427248.png

当设置 overflow:auto; 时,父元素会出现滚动条:

201904291427249.png

3.伪元素

• 原理:类似设置clear属性
• 优点:浏览器支持好,普遍

<div class="parent clearfix">
  <div class="child1">child1右浮动</div>
  <div class="child2">child2右浮动</div>
</div>
  .clearfix{
    zoom: 1;    //zoom(IE专有属性)可解决ie6,ie7浮动问题
    display: block;
  }
  .clearfix:after {
    content: ".";    //content: "";也可
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }

更多CSS问题的相关技术文章,请访问CSS问题教程栏目进行学习!

以上就是清除浮动的css写法有哪些的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:css 清除浮动
  • 本文原创发布php中文网,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 本文来自CSS入门教程栏目,文中为大家介绍了css实现,具一定参考价值,希望可以帮助到大家。css实现可以给父级元素设置高度。
    本文为大家介绍了关于css(clearfix)相关知识,具一定参考价值,希望可以帮助到大家。
    本质是用来做一文字混排效果,但是被我们拿来做布局用,则会很多问题出现。由于元素不再占用原文档流位置,所以它会对后面元素排版产生影响,为了解决这问题,此时就需要在该元素中

    2020-05-02

    1040

    本篇文章为大家解决在css属性时候遇到一问题,比如说:垂直对齐,垂直居中,背景渐变画,表格宽度自适应,模糊文本,样式重置,,通用媒体查询,自定义选择文本,强制出现滚条,固定头部和页脚。
    我们在编CSS样式时候,往往会遭遇CSS样式修改或者界面设计变更,页面CSS在经历几个版本修改之后,可能样式已经用不到了,那么理那无用样式呢?
    本文为大家介绍了css使用伪元素,具一定参考价值,希望可以帮助到大家。BFC是一个独立渲染区域,它可以让处于BFC内部元素与外部元素相互隔离。
    本文来自html教程栏目,文中为大家介绍了html实现自理js、css文件缓存,希望可以帮助到大家。方两种:1、手浏览器缓存;2、添加版本号。
    刚刚结束html小白经常会对web绝对路径和相对路径分不楚,而且经常会搞混淆,那么绝对路径和相对路径区别呢?下面我们来讲述一下绝对路径和相对路径区别和

    专题推荐

    作者信息

    步履不停

    分分合合拂袖悲欢,生生世世心甘情愿。

    最近文章
    phpStudy2018 Nginx4043640
    PHP中的进制转换2451
    PHP 代码优化 技巧总结2516
    推荐视频教程
  • HTML/CSS技术小知识每日分享HTML/CSS技术小知识每日分享
  • HTML+CSS网页基础HTML+CSS网页基础
  • CSS 代码实例CSS 代码实例
  • 视频教程分类