欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css-浮动详解(一)_html/css_WEB-ITnose

程序员文章站 2024-01-06 13:23:46
...
注册博客园也有一段时间了,一直都是看其他大牛的博客,感触颇多,都是我要学习和努力的目标,慢慢的心底也萌生了要写博客的嫩芽,虽然自己也是步入前端这一行业不久的工作者,希望各位大前端行业的前辈多多指教啦!

我写博客的目的呢就是,一呢,总结自己学过和运用的的技术和知识,系统的梳理知识点和原理,加深印象;二呢,报着学习交流的态度,希望大家多多督促,有什么讲的不对的地方欢迎指出啦!当前是为了一份更好的更适合自己的job,find好的工作机会啦!

我相信,一步步的坚持下去,会成为一个优秀的前端程序媛!哈哈!

第一次写博客,虽然接触css许久,也有过许多的HTML+css页面开发的项目经验,但是对float浮动这个原理有时候还是那么是懂非懂得样子,今天我就系统的梳理下浮动相关的知识,献丑啦!

了解float之前先简单的了解下什么是文档流。

文档流:文档流是文档中可显示对象在排列中所占用的位置。通俗的说,将窗体自上而下分成一行一行,并在每行中按从左到右挨次排放元素,即为文档流。

比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。网页中大部分对象默认是占用文档流,也有一些对象是不占用文档流的,比如表单中的隐藏域。

浮动的定义:

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

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。---《w3c》,通俗的说,就是浮动元素漂浮的普通流之上。

CSS 中所有的float属性

属性 描述 值 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit
1

CSS的float特征(简洁的总结了一下):

1:使块元素在一行显示;

2:使内嵌元素支持宽高;

3:不设置宽度的时候宽度由内容撑开;

4:脱离文档流

5:提升层级半层

下面详细分解float:

demo1:设置元素float:left

    css_float
div1
div2
span1 span2