CSS的Float之二

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

说起浮动大家并不陌生,因为有 Word 中看到太多的浮动围绕现象。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”

大家都了解到, CSS 网页布局的原理,就是按照(X)HTML 代码中对象声明的顺序,以流布局的方式 来显示它,而流布局就不得不说到 float 浮动技术,在(X)HTML 中的所有对 象,默认分为两种:块元 素(block element)、内联元素(inline element),虽然也存在着可变元素,但只是随上下文关系确定该元 素是块元素或者内联元素。其实 CSS 的 float 属性,作用就是改变块元素(block element)对象的默认显 示方式。在网页设计中,应用了 CSS 的 float 属性的页面元素就像在印刷布局里面的被文字包围的图 片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。 绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样。 绝对定位的元素不会影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着。

下面我们从不同的方面来了解这个float:

浮动的本质

浮动就是个带有方位的 display:inline-block 属性。display:inline-block 某种意义上的作用就是包裹 (wrap),而浮动也有类似的效果。然而,float 无法等同于 display:inline-block,其中原因之一就是浮动 的方向 性,display:inline-block 仅仅一个水平排列方向,就是从左往右,而 float 可以从右往左排列, 这就是两者的差异。

浮动的属性参数:

浮动拥有三个参数:none:对象不浮动,left:对象浮动到左边,right:对象浮动到右边。下面我们举例来说明这几种情况:

HTML Markup

      <div id="floatA">浮动块A</div>
      <div id="floatB">浮动块B</div>
    

CSS Code

      div {
        width: 200px;
        height: 50px;
        color: #fff;
        padding: 5px;
        margin: 5px;
      }
      #floatA {
        border: 1px solid red;
        background: orange;
      }
      #floatB {
        border: 1px dotted blue;
        background: teal;
      }
    

在还没有应用浮动之前的效果:

下面我们来看第一种情况,就是我们给#floatA 应用浮动 float:left;其结果是什么样:

      #floatA {
        float:left;
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-containing-floats-part-2

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部