5.CSS学习(浮动)

简介: 【7月更文挑战第29天】

浮动(float)
是一种传统的网页布局方式,通过浮动,可以使元素脱离文档流的控制,使其横向排列。

其编写在CSS样式中。

float:none(默认值) 元素不浮动。

float:left 设置的元素在其包含块内左侧浮动。

float:right 设置的元素在其包含块内右侧浮动。

1.设置浮动之后,元素会脱离文档流中占用的内容,其后的元素自动补位。
<!DOCTYPE html>
















因为给box1设置左浮动之后,其脱离了文档流的限制,不再占用文档流中的内容,box2和box3自动补位,box1盖住了box2。



2.设置浮动以后,元素会向包含块内的左侧或右侧移动(向左向右取决于参数值)
box1右浮动



box1,box2,box3都左浮动



通过浮动可以让垂直排列变成水平排列。

3.如果一行之内无法容纳所有的浮动元素,则后边的元素会自动换到下一行。
<!DOCTYPE html>

















4.浮动元素不会超过它上边浮动的兄弟元素,最多一边齐。
<!DOCTYPE html>










box1

box2

box3

box5





box5浮动不能超过之前浮动的兄弟元素,所以最多到box3的位置,不能超过box5

5.浮动元素不会盖住文字,文字会环绕在浮动元素周围。
<!DOCTYPE html>










box6


燕子去了,有再来的时候;杨柳枯了,有再青的时候;桃花谢了,有再开的时候。但是,聪明的,你告诉我,我们的日子为什么一去不复返呢?——是有人偷了他们罢:那是谁?又藏在何处呢?是他们自己逃走了罢:如今(现在 )又到了哪里呢?
我不知道他们给了我多少日子,但我的手确乎是渐渐空虚了。在默默里算着,八千多日子已经从我手中溜去,像针尖上一滴水滴在大海里,我的日子滴在时间的流里,没有声音,也没有影子。我不禁头涔涔而泪潸潸了。
去的尽管去了,来的尽管来着,去来的中间,又怎样地匆匆呢?早上我起来的时候,小屋里射进两三方斜斜的太阳。太阳他有脚啊,轻轻悄悄地挪移了;我也茫茫然跟着旋转。于是——洗手的时候,日子从水盆里过去;吃饭的时候,日子从饭碗里过去;默默时,便从凝然的双眼前过去。我觉察他去的匆匆了,伸出手遮挽时,他又从遮挽着的手边过去,天黑时,我躺在床上,他便伶伶俐俐地从我身上跨过,从我脚边飞去了。等我睁开眼和太阳再见,这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。
在逃去如飞的日子里,在千门万户的世界里的我能做些什么呢?只有徘徊罢了,只有匆匆罢了;在八千多日的匆匆里,除徘徊外,又剩些什么呢?过去的日子如轻烟,被微风吹散了,如薄雾,被初阳蒸融了;我留着些什么痕迹呢?我何曾留着像游丝样的痕迹呢?我赤裸裸来到这世界,转眼间也将赤裸裸的回去罢?但不能平的,为什么偏要白白走这一遭啊?
你聪明的,告诉我,我们的日子为什么一去不复返呢?





box2

box3

box4

box5



相关文章
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
3月前
|
前端开发
|
3月前
|
Web App开发 移动开发 自然语言处理
|
4月前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)
|
5月前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
80 0
学习css的clip-path属性
|
5月前
|
前端开发 JavaScript 开发者
学习CSS动画的高级技巧
【7月更文挑战第1天】学习CSS动画的高级技巧
48 2
|
5月前
|
前端开发
CSS:浮动
CSS:浮动
|
5月前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
5月前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)