登录  /  注册

css浮动是什么

青灯夜游
发布: 2021-05-11 15:15:32
原创
3001人浏览过

css浮动是一种使元素脱离普通标准流控制的方法,元素会根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止,其周围的元素也会重新排列。浮动是一种非常有用的布局方式,能够改变页面中对象的前后流动顺序。

css浮动是什么

本教程操作环境:windows7系统、CSS3版、Dell G3电脑。

css浮动是一种使元素脱离普通标准流控制的方法,会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样非常有用。

浮动是一种非常有用的布局方式,它能够改变页面中对象的前后流动顺序。这样做的好处是,使得内容的排版变的简单,具有良好的伸缩性。

浮动是css布局非常强大的布局功能,也是理解CSS布局的关键问题所在,在CSS中,包括div在内的任何元素都可以浮动的方式显示。

浮动可以让设置了浮动属性的元素脱离标准普通流的控制,移动到其父元素中指定位置。

浮动的使用:

基本语法格式:

选择器{float:属性值;}
登录后复制
  • left 元素向左浮动

  • right 元素向右浮动

  • none 元素不浮动

元素浮动的特性:

1、浮动的元素脱离了标准文档流,摆脱块级元素和行内元素的限制

这是三个不同的div盒子在没有设置浮动的情况下的样子:

1.png

这是两个div盒子以及一个span元素在同时设置浮动情况下的样子:

1-2.png

2、浮动的元素存在相互贴靠的效果,当宽度不够的时候,会出现自动换行

这是三个不同的div盒子在没有设置浮动的情况下的样子:

2.png

这是三个不同的div盒子在设置浮动的情况下的样子:

2-2.png

3、浮动的元素虽然脱离了标准文档流,但是没有脱离文本流,出现被字包围的效果

3.png

4、浮动之后的元素会存在收缩的效果,当一个块级元素没有设置宽度的时,当块级元素浮动之后,就会失去高度

5、当父元素不设置高度的时候,多个子元素的高度和撑起了父元素的高度;当设置浮动后,子元素最高的高度撑起了父元素的高度。

浮动的弊端:

浮动导致的后果:

(1)由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素

(2)与浮动元素同级的非浮动元素会跟随其后,因为浮动元素脱离文档流不占据原来的位置

(3)如果该浮动元素不是第一个浮动元素,则该元素之前的元素也需要浮动,否则容易影响页面的结构显示

我们要知道:浮动的框可以左右移动,直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流,当元素浮动之后,不会影响块级元素的布局,只会影响内联元素布局。

此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候,此时就会出现“高度塌陷”。

3.jpg

浮动的清除:

方法一:添加新元素,应用clear:both;

HTML:

<div class="box">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
  </div>
登录后复制

CSS:

.clear {
      clear: both;
      height: 0;
      line-height: 0;
      font-size: 0
    }
登录后复制

2.png

一切恢复作用啦。

方法二:父级div定义overflow:auto;

HTML:

<div class="box">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </div>
登录后复制
登录后复制

CSS:

.box {
      border: 1px solid #ccc;
      background: #fc9;
      color: #fff;
      margin: 50px auto;
      padding: 50px;
      overflow: auto; 
      zoom: 1; /*zoom: 1; 是在处理兼容性问题 */
    }
登录后复制

结果:也是实现了。

方法三:在父级样式添加伪元素:after或者:before(推荐)

HTML:

<div class="box">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </div>
登录后复制
登录后复制

CSS:

.box {
      border: 1px solid #ccc;
      background: #fc9;
      color: #fff;
      margin: 50px auto;
      padding: 50px;
    }
.box:after{
      content: &#39;&#39;;
      display: block;
      clear: both;
}
登录后复制

结果:当然不用说啦

3.png 

学习视频分享:css视频教程

以上就是css浮动是什么的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号