【CSS学习】--- float浮动属性

TigerChain 发布于2019-04-23 11:48 / 3507人阅读

摘要：浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。不浮动的浮动的三浮动之于块浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

一、前言

　　浮动元素以脱离标准流的方式来实现元素的向左或向右浮动，并且浮动元素还是在原来的行上进行浮动的。float浮动属性的四个参数：left：元素向左浮动；right：元素向右浮动；none：默认值，元素不浮动；inherit：继承父元素的float属性值。

举两个栗子

父元素是否注意到自己有个浮动的子div呢？

<div style="width: 400px; height: auto; border: 2px solid black;">
    <div style="width: 50px; height: 100px; background-color: green; float: right;">div>
    我才不知道有没有浮动框，我只显示文字的高度
div>

从中我们可以发现，处于标准流中的父div并不知道浮动元素的存在，而浮动元素却知道它父元素的边界，它一直向右浮动直到撞到了父框的右边界为止。

<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green; float: right;">
        框二
    div>      
div>

我们发现框二并没有跑到框一这一行的右侧去，而浮动到了原来这行的的右侧。

下面我们一起逐步学习CSS中的浮动属性float。

二、浮动之于文本

CSS参考手册上对float的说明：

　　float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

　　如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

1.实现文本环绕图像

　　浮动框虽然脱离了标准流，但标准流中的文本依旧会做相应的移动，为浮动框留出空间。浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

　　因此，创建浮动框可以使文本围绕图像：

举两个小栗子

<div style="width: 350px; background-color: #33FFFF;">
    <img src="http://h5ip.cn/ge0w" style="width: 100px; height: 100px; float: right;">
    <span>
    路飞性格积极乐观，爱憎分明，而且十分重视伙伴，不甘屈居于他人之下，对任何危险的事物都超感兴趣。和其他传统的海贼所不同的是，他并不会为了追求财富而杀戮，而是享受着身为海贼的冒险和自由
    span>        
div>

<span>虽然我先写于浮动元素，但还是被挤到了右边。。。span>
<div style="width: 100px; height: 100px; background: blue;  float: left;">div>

2.任何元素浮动后都将生成块级框

　　首先应当注意块级框不等同于块状元素，块级元素会独占一行而块级框却不会，浮动元素产生的效果类似于行内块元素。对行内非替换元素设置width和height是无效的，但生成浮动元素之后width和height将有效，并且不会多带带占一行，所以说它类似于行内块元素。

<span style="width: 100px; height: 50px; background-color: #6699FF;">
    不浮动的span
span>
<span style="width: 100px; height: 50px; background-color: #33FFFF; float: left;">
    浮动的span
span>

三、浮动之于块

　　浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

不浮动的div为块级元素，各自独占一行


<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue;">
        框三
    div>        
div>


<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red; float: right;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue;">
        框三
    div>        
div>

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。


<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red; float: left;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue;">
        框三
    div>        
div>

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框，这时父框的高度为0


<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red; float: left;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green; float: left;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue; float: left;">
        框三
    div>        
div>

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。


<div style="width: 200px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red; float: left;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green; float: left;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue; float: left;">
        框三
    div>        
div>

如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”


<div style="width: 200px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 100px; background-color: red; float: left;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green; float: left;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue; float: left;">
        框三
    div>        
div>

四、浮动的副作用及处理

　　通过上面的介绍可以总结出浮动的两个副作用：1.页面塌陷，也就是子元素不能将父元素撑开；2.元素覆盖，浮动元素不在标准流中因此可能会覆盖标准流中的元素。四种解决方案如下：

1.手动给父元素添加高度

　　这种方法用来解决父元素的页面塌陷问题，应当注意的是，为保证父框的高度等于最高浮动元素的高度应当充分考虑浮动元素的边框以及内外边距。


<div style="width: 300px; height: 52px; border: solid 1px black;">
    <div style="width: 80px; height: 50px; background-color: red; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: green; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: blue; float: left; border: solid 1px #FFF;">div>        
div>

这种方式治标不治本，当浮动子元素增加时，页面塌陷问题重现

2.通过clear属性清除内部和外部浮动

　　clear 属性规定元素的哪一侧不允许其他浮动元素。clear属性的四个参数：none（默认值）、left、right、both；如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

　　none：允许两边都可以有浮动对象；left：不允许左边有浮动对象；right：不允许右边有浮动对象；both：不允许有浮动对象。

添加clear属性之前


<div style="width: 300px; height: auto; border: solid 1px black; clear: both;">
    <div style="width: 80px; height: 50px; background-color: red; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: green; border: solid 1px #FFF; clear: left; ">div> 
div>

添加之后

添加clear前


<div style="width: 300px; height: auto; border: solid 1px black; clear: both;">
    <div style="width: 80px; height: 50px; background-color: red; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: green; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: blue; float: left; border: solid 1px #FFF;">div> 
    <div style="width: 80px; height: 50px; background-color: green; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: blue; float: left; border: solid 1px #FFF;">div>   
    <div style=" clear: both;">div>   
div>

添加之后

3.给父元素添加overflow属性并结合zoom:1使用


<div style="width: 300px; height: auto; border: solid 1px black; clear: both; overflow: hidden; zoom: 1;">
    <div style="width: 80px; height: 50px; background-color: red; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: green; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: blue; float: left; border: solid 1px #FFF;">div> 
    <div style="width: 80px; height: 50px; background-color: green; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: blue; float: left; border: solid 1px #FFF;">div>  
div>

overflow属性是用来修剪溢出的元素，所以使用此种方案会使溢出元素被截掉

使用overflow前

<div style="width: 300px; height: auto; border: solid 1px black; clear: both; padding: 5px; overflow: hidden;">
    <div style="width: 500px; height: 50px; background-color: red; border: solid 1px #FFF; float: left;">div> 
div>
使用后

zoom是IE浏览器专用的属性，通过子元素的高度来设置父元素的高度，添加该属性用来兼容IE浏览器

4.给父元素添加浮动

　　这是一种”以毒攻毒“的方法，因为父元素浮动后虽然消除了浮动子元素对其的影响，但父元素下面的元素就可能就会受该浮动父元素的影响。

<div style="width: 300px; height: auto; border: solid 1px black; clear: both; float: left;">
　　<div style="width: 100px; height: 50px; background-color: red; float: left;">div> 
div>
<div style="width: 200px; height: 100px; background-color: blue;">div>

这四种常用的清除浮动解决办法可以根据实际情况进行使用，当然还有一些也比较好的解决办法，例如使用before伪类清除浮动，等进一步学习之后再补充。

五、最后

　　感谢博主谦行的博客：CSS布局 ——从display，position， float属性谈起以及W3School提供的学习资料！所学不深，如有错误或不足之处还望留言指出，十分感谢！

云服务器 GPU云服务器 float属性浮动-前端-css css属性访问CSS属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1184.html

深入学习CSS布局系列（一）布局常用属性

摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...

Noodles 2019-08-30 12:53 评论0 收藏0
深入css布局 (2) — 定位与浮动

摘要：深入布局定位与浮动在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。定位后，原来在文档流中占据的位置，会被其他元素所占据。清除浮动的特殊应用清除浮动可以解决父元素高度塌陷问题。深入css布局(2) — 定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深...

Crazy_Coder 2019-04-23 13:42 评论0 收藏0
前端技术之_CSS详解第四天

摘要：前端技术之详解第四天一第三天的小总结盒模型，什么是盒子所有的标签都是盒子。如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的盒子居中的值可以为，表示自动。前端技术之_CSS详解第四天一、第三天的小总结盒模型box model，什么是盒子？　　所有的标签都是盒子。无论是div、span、a都是盒子。图片、表单元素一律看做文本。盒模型有哪些组成：　　width、hei...

番茄西红柿 2019-04-23 13:45 评论0 收藏0
CSS基础知识之float

摘要：前段时间写过一篇基础知识之，当时对的理解不太准确，被慕课网多名读者指出原文已修正，如有误导实在抱歉。浮动的基础知识浮动有个属性左浮动右浮动不浮动继承。浮动元素脱离了标准文档流，文字和行级元素会环绕该元素，块级元素则不受影响。前段时间写过一篇CSS基础知识之position，当时对float的理解不太准确，被慕课网多名读者指出（原文已修正，如有误导实在抱歉）。现对float进行更深入的...

wuyangchun 2019-08-30 13:06 评论0 收藏0
CSS学习摘要-浮动与清除浮动

摘要：为了实现这个效果，我们需要清除浮动。元素被向下移动用于清除之前的左右浮动。块格式化上下文对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个内的元素。且为了不影响接下来的文档标准流，往往也要收尾做出清除浮动。以下从浮动到BFC的段落摘自MDN 网络开发者float 浮动float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流...

番茄西红柿 2019-04-23 13:40 评论0 收藏0