css中Float属性深入剖析与应用

一、Float的特性

1. 应用于文字围绕图片

2. 创建一个块级框

3. 多列浮动布局

4. 浮动元素的宽度、高度自适应,但可以设置其值。

二、核心解决的问题

文字围绕图片:img标签与多个文本标签放置在一个容器中,如果img浮动,文本标签会围绕图片。

<imgsrc="../img/a.jpg"style=" width: 100px; height: 200px; float: left;"alt="">

        <p>001文件内容文件内容文内容文件内容<br/>

        文件内容文件内容文件内容文件内容文件内内容文件内容<br/>

        文件内容文件内容文件内容文件内容文件内容<br/>

        文件内容文件内容文件内容文件内容文内容文件内容文件内容<br/>

        <p>p标签文件内容文件内容文件内容文件内容文件内容文容文件内容文件内容文件内容</p>

        <div>Div标签文件内容文件内容文件内容文件内容文件内容文件内容</div>

        文件内容文件内容文件内容文件件内容文件内容文件内容<br/>

        文件内容文件内容文件内容文件内容文件内容文件内容文件内容文件内容<br/>

        文件内容文件内容文件内容文件内容文件内容文件内内容文件内容<br/>

        文件内容文件内容文件内容文件容文件内容文件内容<br/>

        文件内容文件内容文件内容文件容文件内容文件内容<br/>

        </p>

2.1 这是一个问题

浮动元素与正常元素相邻,且浮动元素与正常元素之间没有清除浮动,此时正常元素会被浮动元素盖住,但包含的内容会围绕浮动元素显示。

<divstyle="width: 100px; height: 200px; background: red;float: left;">001</div>

<divstyle="width: 100px; height: 200px; background: gray;float: none;"><p>002</p></div>

001浮动,002没有浮动,但002元素本身被001盖住,但内容却围绕001显示。

三、非核心且主要应用领域

分栏布局:让区块先水平排列,然后超出部分另起一行。

主要特点

1.父级高度塌陷(这也是一个严重的问题)

.wrap{

           background:red;

           padding:10px;

           width:auto;

        }

        .left{

            background:gray;

            width:200px;

            height:100px;

            float:left;

        }

        .right{

            background:yellow;

            width:100px;

            height:100px;

            float:left;

        }

<divclass="wrap">

        <divclass="left">left</div>

        <divclass="right">right</div>

</div>

2.宽、高变成自适应子元素,但宽、高的设置有效

.wrap{

           background:red;

           padding:10px;

           float:left;

        }

        .left{

            width:100px;

            background:gray;

        }

        .right:{

            width:200px;

            background:yellow;

        }

<divclass="wrap">

        <divclass="left">left</div>

        <divclass="right">right</div>

</div>

2. 解决高度塌陷的问题

首先我们需要了解BFC和IFC这两人个基本的概念,因为他与浏览器的渲染有着密切的关系。

1.BFC(块级格式化上下文)

他是一个独立渲染的区域,规定区域内部如何布局,且与外部毫不相干,主要规则如下:

1.1 内部的box会垂直方向,一个接一个地放置

1.2 Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的Margin会发生重叠

1.3 BFC区域不会与float重叠

.head{

            background:pink;

            margin:20px0px;

            height:100px;

        }

        .wrap{

           background:red;

           padding:10px;

           margin:20px0px;

           overflow:hidden;

        }

        .left{

            width:100px;

            background:gray;

            margin:10px0px;

        }

        .right:{

            width:200px;

            background:yellow; 

            margin:20px0px;

        }

<divclass="head">head</div>

    <divclass="wrap">

        <divclass="left">left</div>

        <divclass="right">right</div>

    </div>

.head与.wrap两个box之间上下各设置有20px的外边距,但发生了重叠;

.head与.left两个之间,.head有20px的外边距,.left有10px的外边距,没有发生重叠,因为.wrap使其创建了BFC(overflow:hidden)。

1.4 每个box的margin 左边,与包含border box的左边相接触(右边一样),浮动也是如此

2. IFC(行级格式化上下文)

框从包含块的顶部开始,一个接一个水平放置。水平方向上的外边距、边框、内边距所占空间都放在一起(display为inline、inline-block;元素本身具有inline特性的元素都具体以下特征)。规则如下:

2.1 不能指定宽高

2.2 Margin、Padding、border垂直方向的无效

2.3 行框的左边紧贴包含块的左边,而行框的右边紧贴其包含框的右边,而浮动块可以插入在包含块边缘与行框之间。

2.4 行内框高度由line-height决定。

此节例子可以参考display章节的inline元素。

3. 解决方案

主要根据BFC的原理实现,因为BFC的渲染的是整块区域,也就会计算出宽、高。这也是传说中的清除浮动的方案

3.1 父容器创建BFC方法

3.1.1 创建BFC的方法

a) Float除了none以外的取值;

b) Overflow除了visible以外的值;

c) Display值为table-cell、table-caption、inline-block、flex、inline-flex等

d) Position值为absloute、fixed

e) Fieldset元素

3.1.2 清除浮动

a) Float、overflow、display三种方式都可以清除浮动,但position、fieldset虽然创建了bfc但不可以清除浮动(也就是不能解决高度塌陷的问题)。主要原因为:position、fieldset都需要子元素来撑开父容器的高度,但子元素浮动后又不存在高度,所以失效。

b) Float、overflow、display示例代码:

.wrap{

            background:gray;

            padding:10px;

            overflow:auto;

        }

        .left, .right{

            background:red;

            float:left;

            width:200px;

            height:100px;

        }

        .right{

            background: yellow;

        }

        .footer{

            background: pink;

        }

<divclass="wrap">

        <divclass="left">left</div>

        <divclass="right">right</div>

    </div>

<divclass="footer">footer</div>

3.1.3 最后一个子元素clear:both

利用clear:both触发父容器重新计算高度的原理实现,示例代码如下:

.wrap{

            background:gray;

            padding:10px;

        }

        .left, .right{

            background:red;

            float:left;

            width:200px;

            height:100px;

        }

        .right{

            background: yellow;

        }

        .footer{

            background: pink;

        }

        .clear{

            clear:both;

            zoom:1;

        }

<divclass="wrap">

        <divclass="left">left</div>

        <divclass="right">right</div>

        <divclass="clear"></div>

    </div>

<divclass="footer">footer</div>

3.1.4 After添加最后一个子元素

利用css的:after伪元素实现,动态插入元素并清除浮动:

.wrap{

            background:gray;

            padding:10px;

        }

        .wrap:after{

            content:'';

            display:block;

            overflow:hidden;

            clear:both;

        }

        .left, .right{

            background:red;

            float:left;

            width:200px;

            height:100px;

        }

        .right{

            background: yellow;

        }

        .footer{

            background: pink;

        }

<divclass="wrap">

        <divclass="left">left</div>

        <divclass="right">right</div>

    </div>

<divclass="footer">footer</div>

4. 总结

1. 利用bfc方式清除浮动,简单、浏览器支持良好,但在IE6-版本支持存在问题。但是存在以下局限性,要适环境而用:

    a) Overflow方式:滚动条会被隐藏,如果子内容超高则存在显示不全的问题;

    b) Float方式:让父容器浮动,那么就存在对父容器同辈元素的影响;

    c) Dipslay方式:让父容器变为table或者flex等,都存在不明确的影响,大家都不推荐使用。

2. 最佳解决方案:利用:after添加一个伪元素并给予clear:both和zoom:1来实现清除浮动,兼容性好,对环境影响最小。

时间: 2024-09-19 02:20:36

css中Float属性深入剖析与应用的相关文章

扩展-css中的属性特别多,需要全部记好吗?

问题描述 css中的属性特别多,需要全部记好吗? 从<<别具光芒DivCss网页布局与美化>>书中了解到,css的属性有 1.类型 有属性13种 2.背景 有6种 3.区块 有7种 4.方框 有12种 5.边框 有12种 6.列表 有三种 7.定位 有14种 8.扩展 有4种 9.过渡 有4种 而这9类中,每一类又有很多的属性.估计一共有属性70多个吧, 这么多,都需要熟悉吗? 解决方案 表示我CSS书看了2本了,想全部都熟悉完全是不可能的事,知道个大概,用的时候再详细研究.个人意

html-关于CSS中的属性width

问题描述 关于CSS中的属性width 为什么在CSS中定义的width,用FSCapture工具测量时,却发现不吻和,为什么会这样啊 解决方案 看下margin padding等,用IE F12或者Chrome带的开发工具等具体看下. 解决方案二: width属性仅为内容区宽度,不包括padding.border.margin:......答案就在这里:CSS width属性 解决方案三: 你测量这个干什么呀????????? 解决方案四: 这种情况应该是浏览器设置了缩放,你检查一下浏览器设置

CSS中position属性之fixed实现div居中_javascript技巧

position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 上下左右 居中 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即

CSS中Float概念相关文章采撷

css|概念 Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧.Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性.可用性问题备受责难.然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的. 如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂.大多数问题都是由于老版本的IE带来的(我只是猜想).如果你知道这些bug,你就能避免这些问题. 让我们尝试去解决这些问题并澄清一些以前使用浮动的误解.我们参考了成打的相关文章,并选取了最为重要的一

用CSS的float属性创建三栏布局网页的方法

  三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一种用CSS的float和clear属性来获得三栏布局的方法. 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格.创建固定宽度布局或者"液态"(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页. 基本方法 基本的布局包含五个div,即标题.页脚和三栏.标题和页脚占据

css中float left与float right clear的原理使用说明图解

点评:CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到右,放不下则换行),后者是右浮(往右飘)动.但仅仅是如此吗?-No! 要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个浮动方向一致的元素使用流式排列,

CSS中 Float 的 clear:both 无效的解法

CSS 对於 Float 的 clear:both 每年都会有新的写法. XD 2008.2010 年的 clear:both 写法 不过, 在今年看到此篇: Best Cross-browser CSS Clearfix solution, 跟上述那篇比对起来, 参数多增加了几个, 到底有何差异, 就不细究了~ 直接用就对了. XD CSS 的 float 使用起来蛮方便的, 但是使用完后, 那块空间就等於是消失, 所以需在下面加 clear:left / clear:right / clea

javascript下操作css的float属性的特殊写法_javascript技巧

使用js操作css属性的写法是有一定的规律的:  1.对于没有中划线的css属性一般直接使用style.属性名即可.  如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等.  2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可.  如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.st

举例详解CSS中position属性的使用

  position 这个属性决定了元素将如何定位.它的值大概有以下五种: 每个网页都可以看成是由一层一层页面堆叠起来的,如下图所示. position 设置为 relative 的时候,元素依然在普通流中,位置是正常位置,你可以通过 left right 等移动元素.会影响其他元素的位置. 而当一个元素的 position 值为 absolute 或 fixed 的时候,会发生三件事: 把该元素往 Z 轴方向移了一层,元素脱离了普通流,所以不再占据原来那层的空间,还会覆盖下层的元素. 该元素将