CSS中的浮动float

1.1 什么是浮动？

CSS 的 float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

float（浮动），往往是用于图像水平排列，或让列表水平排列，浮动在布局中非常有用。

1.2 元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

一个元素设置浮动，紧挨着它的元素不设置浮动。他们在页面中是如何存在？

<style>*{margin:0;padding: 0;}.parent{width: 800px;height: 900px;border: 10px solid red;}.box1{width: 220px;height: 220px;background-color: blue;float:left;}.box2{width: 360px;height: 360px;background-color: skyblue;float:left;}.yl{width: 450px;height: 450px;background-color: green;float:left;}</style></head>
<body><div class="parent"><div class="box1"></div><div class="box2"></div><div class="yl"></div>
</body>
</html>

预览：

1.3 浮动元素的特点

浮动的性质：脱标、贴边、字围、收缩。

（1）浮动的元素脱标

浮动元素，脱离标准文档流（它当前就不在标准文档流里面了）。它在标准文档流中位置就被腾了出来。于是在标准文档流中的.box2就跑了上去。

在页面中你能看到它。但他不在标准文档流中。

（2）浮动的元素互相贴靠

浮动元素与浮动元素之间，是并排存在的。

特别注意：

a. 空间充足的情况下，浮动元素之间是互相贴靠，并排存在的。

b. 空间不足的情况下，

1）如果没有足够的空间，同时第2个元素高度比第一个元素小，那么第3元素会贴在第1个元素的后面显示。

2）如果没有足够的空间，同时第2个元素高度比第一个元素大，那么第3元素会贴左墙显示。

（3）标准文档流中的行元素，设置浮动之后，当前这个元素就可以设置宽度和高度了。（脱标的元素，是没有行、块、行内块这种方法）。

<style> .tj{width: 400px;height: 400px;background-color: pink;/* 浮动 */float: left;}</style>
</head>
<body>
<span class="tj">小汤汤</span>

（4）浮动元素（脱标元素），可以使用盒模型的5大属性。

 <style> .xw{/* 我们希望这个容器在浏览器渲染的时候，占据的实际宽度是450像素 */width: 330px;height: 350px;padding-left: 100px;padding-top: 100px;border: 10px solid red;background-color: lightblue;/* 浮动 */float: left;}.yty{width: 500px;height: 500px;background-color: orange;}</style>
</head>
<body>
<a href="" class="xw">小王</a>

（5）浮动的元素有“字围”效果

注意：这个效果是单个元素浮动。

<style>body,div,img,p{margin: 0;padding: 0;}.parent{width: 760px;margin: 0 auto;outline: 1px dashed red;}.pic{width: 220px;float: left;}</style>
</head>
<body><div class="parent"><!-- 浮动的元素有“字围”效果我们让 包裹图片的这个.pic 盒子浮动 --><div class="pic"><img src="img/1.jpg" alt="" width="220"></div><div class="content"><p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p><p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p><p>大门前石板路有一个斜坡，坡上有绿树成行，长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。常有山灵，秀腰白齿，往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p><p>大门前石板路有一个斜坡，坡上有绿树成行，长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。常有山灵，秀腰白齿，往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p><p>夜梦极可怪。见一淡绿百合花，颈弱而花柔，花身略有斑点青渍，倚立门边微微动摇。在不可知的地方好像有极熟悉的声音在招呼：</p><p>“你看看好，应当有一粒星子在花中。仔细看看。”</p><p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p><p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p></div></div>

预览：

（6）浮动元素的收缩性

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度

<style>*{margin: 0;padding: 0;}li{list-style-type: none;}.menu{width: 600px;outline: 1px dashed red;}.menu li{float: left;background-color: orange;}</style>
</head>
<body><ul class="menu"><li>小汤汤</li><li>小杨</li><li>小明</li></ul>

注意：

我们给浮动元素，一般会设置宽度width。我们不单独在元素什么写float浮动。

如果我们在项目开发中，不给浮动的元素设置宽度，我们可以使用padding-left和padding-right。让元素在页面中有实际占有的宽度（li元素中里面的文本内容的宽度+左内边距+右内边距）。

<style>*{margin: 0;padding: 0;}li{list-style-type: none;}.menu{width: 600px;outline: 1px dashed red;}.menu li{float: left;padding-left: 50px;padding-right: 50px;background-color: orange;margin-right: 5px;}</style>
</head>
<body> <ul class="menu"><li>小汤汤</li><li>小杨</li><li>小明</li></ul>

1.4 css中浮动值的设置

float它的值有3个,分别是left、right、none。

float:left 左浮动

float:right 右浮动

float:none 不浮动

<style>*{margin: 0;padding: 0;}.parent{width: 990px;margin: 0 auto;outline: 1px dashed red;overflow: hidden;}.son{width: 300px;height: 500px;}/* .son1{background-color: lightblue; float: left;}.son2{background-color: lightgreen; float: left;}.son3{background-color: lightsalmon; float: left;} */.son1{background-color: lightblue; float: left;}.son2{background-color: lightgreen; float: right;}.son3{background-color: lightsalmon; float: none;}</style>
</head>
<body><div class="parent"><div class="son son1">son1</div><div class="son son2">son2</div><div class="son son3">son3</div></div>

全部左浮动预览：

son2右浮动：

son1左浮动，son2右浮动：

son1，son3左浮动，son2右浮动：

注意：

给元素设置float:none;之后，这个元素会在标准文档流中。例如：

.son1{background-color: lightblue; float: left;}
.son2{background-color: lightgreen; float: right;}
.son3{width: 400px;height: 600px;background-color: lightblue; float: none;
}

CSS中的浮动float相关推荐

详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
css现在还用浮动吗,css3-9 css中的浮动怎么使用
css3-9 css中的浮动怎么使用一.总结一句话总结:用来做一般的行效果,比如说手机左右分布的头部导航栏.浮动的东西放到一个div中去,里面的内容根据需求左浮动或者右浮动,然后记得加上清除浮动. ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
html 清除float,css中如何清除float
css中清除float的方法是,为父元素设置[overflow:auto].设置之后,内容元素会被修剪,超出元素将不可见.我们还可以通过增加空标签,或者使用[:after]伪元素来清除float. 本 ...
CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div ...
css --- [读书笔记] 浮动(float) 与清除浮动
说明源代码学习 1. 浮动 1.1 CSS布局的三种机制网页布局的核心 - 利用 CSS 来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置: 标准流.浮动和定位. 标准流: 块级元素(div ...
CSS中清除浮动的代码
.clearfix:after {content: "\0020";display: block;height: 0;clear: both; }.clearfix {zoom: ...
对css中的浮动属性float刨根解牛
1.浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 脱离常规流,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 2.几张图说明浮动常 ...
div+css中设置了float属性后如何让外层的高度随着内层的高度大小自动调整
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...

CSS中的浮动float

CSS中的浮动float相关推荐

最新文章

热门文章