css-浮动

2018-11-08 admin

一,浮动的定义

一个浮动盒会向左或向右移动,直到其外边(outer edge)挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒,浮动盒的外top(边)会与当前行盒的top(边)对齐。如果没有足够的水平空间来浮动,它会向下移动,直到空间合适或者不会再出现其它浮动了

因为浮动(盒)不在普通流内,在浮动盒之前或者之后创建的未定位的(non-positioned)块盒会竖直排列,就像浮动不存在一样。然而,接着浮动盒 创建的当前及后续行盒会进行必要的缩短,为了给浮动(盒)的margin box让出空间。

二,浮动的例子

浮动的定义很枯燥,下面我们通过几个例子,来理解浮动的概念。 1.浮动盒放不下会换行 demo 链接描述

<div class="ct">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
<style>
.ct{
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}

.box{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1{
  background: blue;
}
.box2{
  background: pink;
}
</style>

执行结果 所有盒子都会向左浮动,直到外边沿挨着块边沿。由于容器宽度不够,box3放不下,就只能向下移动最左边 clipboard.png

2.被卡住 demo 链接描述

<div class="ct">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
<style>
.ct{
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}

.box{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1{
  background: blue;
  height: 120px;
}
.box2{
  background: pink;
}
</style>

执行结果 由于box1的高度比box2的高,box3在向下向左移动的时候,遇到了box1的外边沿,就停止移动了。 clipboard.png

3.浮动和文本 demo链接描述

<div class="ct">
  <div class="box box1">1</div>
  <p>挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒,浮动盒的外top(边)会与当前行盒的top(边)对齐
如果没有足够的水平空间来浮动,它会向下移动,直到空间合适或者不会再出现其它浮动了</p>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
<style>
.ct{
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}

.box{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1{
  background: blue;
  height: 120px;
  opacity:0.2;
}
.box2{
  background: pink;
}
  p{
    background-color:yellow;
  }
</style>

执行结果 我们给p段落加上背景色,发现p段落是看不见浮动元素的,但里面的文字是可以看见浮动元素的。 当一个普通元素遇到一个浮动元素,普通元素是看不见浮动元素的。但里面的行盒是可以看见浮动元素的,行盒会缩短并给浮动元素让位

clipboard.png

写一下我理解的行盒的概念。行盒就是 line-box,也就是一个块级元素展示出的每一行就是一个行盒。块级元素内展示在一行的所有元素共同构成了一个行盒。比如下图的img和span1构成一个行盒,剩下2个span和button构成另外一个行盒。当页面面积发生改变,每行的内容变化,行盒的内容也会变化。 这里有一篇写行盒(line box)垂直方向的文章链接描述

clipboard.png

4.浮动会脱离普通流 普通流中所遵循的规则是块级元素占据一行,行内元素占据内容的宽度。所有元素从上到下依次排列,普通元素可以把父元素的内容撑开。 但浮动元素脱离了普通流,元素不是一个个从上到下排列的,浮动元素也不能把父元素撑开,因为父元素压根就看不见浮动元素。 demo链接描述

clipboard.png

5.块级元素设置浮动之后,宽度会收缩,宽度由内容决定。 行内元素设置浮动之后,可以设置宽高,内外边距。 感觉有点像inline-block的特性

<body>
  <div class="box">这是div</div>
  <span>这是span</span>

  <style>
  .box{
    float: left;
    background: red;
  }
  span{
    float: left;
    background: blue;
    width: 100px;
    height: 50px;
    margin: 10px;
  };

  </style>

执行结果

clipboard.png 当我们取消浮动,结果是div占据一整行,span不能设置宽高和内外边距。

clipboard.png

6.用浮动设置一个简单的导航栏

  <div class="navbar">
    <ul>
      <li><a href="#">1首页</a></li>
      <li><a href="#">2产品</a></li>
      <li><a href="#">3服务</a></li>
      <li><a href="#">4关于</a></li>
    </ul>    
  </div>

<style>
    .navbar>ul{
      float: right;
      list-style: none;
    }
    .navbar>ul>li{
      float: left;
      margin-right: 15px;
    }

</style>

clipboard.png

三,浮动的副作用

1.对后续元素位置产生影响 demo:链接描述

 <div id="content">
    <div class="menu">侧边栏固定宽度</div>
    <div class="aside">侧边栏固定宽度</div>
    <div class="main">内容区块自适应宽度</div>    
  </div>
  <div id="footer">我是 footer,但我的样式出现了问题</div>

  <style>
  .aside{
    width: 150px;
    height: 300px;
    background: red;
    float: right;
    opacity:0.2;
  }
  .menu{
    width: 150px;
    height: 300px;
    background: red;
    float: left;
    opacity:0.2;
  }
  .main{
    margin-right: 160px;
    margin-left: 160px;
    background: blue;
    height: 200px;
  }
  #footer{
    background: grey;
  }

  </style>

执行结果: 由于浮动元素脱离普通文档流,导致浮动元素后面下一个元素footer的排列会出错。 clipboard.png

(2)父容器高度计算出现问题 父元素看不到浮动元素,如果父元素没有设置高度,浮动元素是无法撑开父容器的。 demo链接描述 /li里面的元素全部浮动的情况下,.navbar的高度为0,所以设置背景色无效 clipboard.png

四:清除浮动

(1)clear属性 clear可以用于任何元素,无论是不是浮动元素都可以加。

官方解释:要求该盒的top border边位于源文档中在此之前的元素形成的所有左浮动盒的bottom外边下方 不正经的理解:如果我前面有左浮动元素,我必须位于它的下方

官方解释:要求该盒的top border边位于源文档中在此之前的元素形成的所有右浮动盒的bottom外边下方 不正经的理解:如果我前面有右浮动元素,我必须位于它的下方

如果我前面有浮动元素,我必须位于它的下方

(2)封装一个clearfix的属性,用于父元素清除浮动 原理:父元素看不见元素,导致高度不正常。那我们就放一个普通元素在父元素的最后,把高度撑开。因用伪元素可以省一个标签,所以就用伪元素

.clearfix::after {
  content:'';  //在父元素的最后生成一个内容为空的元素。
  display: block; //生成的伪元素是内联元素,需要设置成块级元素来占位置啊
  clear: both;  //把这个元素清除浮动,放在父元素的最下方,把父元素撑开
}

使用:把.clearfix封装成一个属性,以后想要在哪里清除浮动,就给它的父元素加上.clearfix的属性。 demo链接描述

clipboard.png

五:浮动和负margin

两个浮动元素,如果因放不下导致其中一个下移,对下移的元素设置负 margin 值。 当-margin加自身的宽度小于容器的宽度,可将其上移. 如图所示,当box2的负margin为-2px,才能上移。 clipboard.png

六:总结

1、浮动元素脱离了普通文档流,文档的普通流中的元素表现的就像浮动元素不存在一样,但文本可以看见浮动元素 2、设置浮动后行内元素拥有一些块级元素的特性,可以设置宽高margin 块级元素有了行内元素的特性,不再占据一整行,宽度决定于自身内容 3、浮动元素不会将父容器撑开 4、浮动元素左右浮动时遇到其他浮动元素会停止 5、如果用了浮动,其父元素最好需要清除浮动

原文链接:https://segmentfault.com/a/1190000016949720

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44904.html

文章标题:css-浮动

相关文章
css3.0参考手册
下载地址:css3.0参考手册 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
使用HTML+CSS+JS制作简单的网页菜单界面
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实...
2017-03-27
JavaScript点击按钮后弹出透明浮动层的方法
本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法。分享给大家供大家参考。具体分析如下: 这里实现点击后页面变灰色,并用JS弹出一个居中的浮动层提示窗口,这个窗口是透明的,可以设置透明度,网上已经有很多类似的JavaScrip...
2017-03-23
javascript实现动态导入js与css等静态资源文件的方法
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下: &#x2F;** * 动态导入静态资源文件js&#x2F;css *&#x2F; var $import = fu...
2017-03-27
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
JavaScript实现的圆形浮动标签云效果实例
本文实例讲述了JavaScript实现的圆形浮动标签云效果。分享给大家供大家参考。具体如下: 这里介绍的JS标签云效果,在鼠标的作用下会自动转动,整体上围绕成一个圆形,各个标签之间无需Div代码,直接文字+链接的形式,有多少就显示多少,Ja...
2017-03-27
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法。分享给大家供大家参考。具体如下: 首先来看一下运行效果图: 具体实现代码如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W...
2017-03-23
js+css实现上下翻页相册代码分享
这是一款基于js+css实现上下翻页相册特效代码,相册可以从上下两个方向进行切换,是一款非常实用的幻灯片特效源码。 &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; con...
2017-03-29
PostCSS真的太好用了!
在PostCSS官网有着这样的对PostCSS特性介绍,箭头后面是对应功能的插件及其github地址。 PostCSS是一款使用插件去转换CSS的工具,有许多非常好用的插件,例如autoprefixer,cssnext以及CSS Modu...
2018-05-09
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法。分享给大家供大家参考。具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果。 &lt;!DOCTYPE...
2017-03-23
回到顶部