浮动的简单例子

最新推荐文章于 2022-09-12 15:49:50 发布
最新推荐文章于 2022-09-12 15:49:50 发布
阅读量328 收藏
点赞数
分类专栏： css知识点 文章标签： css的浮动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shisjieshoufu/article/details/79199797
版权
<!DOCTYPE html >
< html >
< head >
< meta charset= "utf-8" />
< meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
< title >浮动的变化 </ title >
< meta name= "viewport" content= "width=device-width, initial-scale=1" >
< link rel= "stylesheet" type= "text/css" media= "screen" href= "main.css" />
< script src= "main.js" > < / script >
< style >
.one{
height: 100px;
width: 100px;
background-color: red;
float: left;
/* 这个就是转换成为行内块级元素display是显示的意思 */

}
.two{
height: 100px;
width: 100px;
background-color: yellow;
float: left;
}
.fd{
height: 100px;
width: 100px;
background-color: teal;
float: left;
}

span{
                 background-color: red;
                 width: 100px;
                 height: 100px;

                 float: left;
             }

< / style >
</ head >
< body >
<!-- 标准流(文档流)
块级元素独占一行显示 标准流的显示方式
元素默认的显示方式就是标准流。 -->
< span >
行级1
</ span >

< span >
行级元素
</ span >
< div class= "one" >
块级元素
</ div >
< div class= "two" >
块级2元素
</ div >

< div class= "fd" >
浮动
</ div >

<!-- 浮动
用法：
Float:left| right
特点：
☞设置了浮动的元素不占原来的位置（脱标）
☞可以让块级元素在一行上显示
☞浮动可以行内元素转化为行内块元素
模式转换的过程中，能用display就用display
作用：
☞ 浮动用来解决文字图片环绕问题
☞ 制作导航栏
☞网页布局 -->

</ body >
</ html >
御裔宸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面浮动示例
蜗牛程序员
04-12 364
收藏该文章                         window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(g
css浮动案例
前端小99的博客
04-13 2146
彼此相邻的浮动元素清除浮动 - 使用 clear元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊：使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。事例案列：&lt;style&gt;* {    box-sizing: border-box;}body {    ma...
CSS浮动的示例
qq_43776742的博客
07-31 431
浮动最初的作用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 500px; ...
浮动小示例
myzhou2017的博客
03-18 230
浮动分为左浮动  右浮动， 元素如果浮动的话  会脱离文档流，下面的元素会挤上去，所以当使用浮动时要记得清除浮动浮动实例&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无
css关于浮动的例子--float
weixin_33671935的博客
10-07 95
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Floating example</title> <style> .container{ wi...
css之浮动案例。
qq_43198727的博客
11-01 1213
浮动 浮动可以实现让多个元素排在同一行，并且给这些元素设置宽度与高度！浮动可以让元素脱离标准文档流 就可以实现让多个元素排在同一行，并且可以设置宽高 浮动:他是通过一个(float)浮动属性来实现 float left 向左浮动 向左移动 float right 向右移动 浮动元素的特性 1.浮动元素它可以脱离标准文档流 他不再占用空间了 2.我们可以把浮动元素理解为 “漂”浮动元素他的层级要比标准文档流里面的元素层级要高，它们会将标准文档流中的元素给压盖住 3.浮动元素他会向左或者向右移动。 4.浮动元
javascript中字体浮动效果的简单实例演示
10-23
以下是一个简单的实例，演示如何使用JavaScript实现这一效果。 首先，我们需要了解CSS中的`display`属性。`display`用于定义元素的显示方式，常见的值有`block`、`none`等。在本实例中，我们将利用`display`属性...
js实现的简单图片浮动效果完整实例
10-22
主要介绍了js实现的简单图片浮动效果,以完整实例形式分析了javascript实现图片定时漂浮移动功能的方法,涉及javascript定时函数与数值动态运算相关技巧,需要的朋友可以参考下
简单实现js浮动框
11-30
本文实例为大家分享了js浮动框的实现代码，供大家参考，具体内容如下 一.在需要加入浮动框的页面中加入如下css代码： <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win { border: 1...
Div浮动的简单实现
03-20
在叶良彪的博客文章“div浮动效果”中，可能详细解释了如何使用CSS设置Div的浮动，以及展示了各种浮动效果的实例。通过阅读这篇文章，开发者可以更好地理解和应用Div浮动，从而提升网页设计的技巧和效率。 总结来说...
浮动的原理 例子
A123ppleQueen的博客
07-20 219
当元素的值开始浮动时，就脱离了正常的文档流，在页面的布局中就不会遵守原来的布局。 浮动通过flaot实现。 比如：三个布局时。 图片之后补啊啊啊啊啊啊啊啊啊 正常布局： 现在是三个竖排 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width:200px; heig
CSS浮动详解及案例
小洋人最happy的专栏
07-14 3858
浮动的规则 规则一 元素一旦浮动后 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素)或其他元素的边界为止 定位元素会层叠在浮动元素上面 示例 <style> .box { height: 500px; background-color: green; } span { background-color: hotpink; } strong background-color: khaki;
浮动案例
qq_44888570的博客
11-05 318
一个网页的小小案例，主要用到浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实训2</title> <link rel="stylesheet" href="../css/4-2.css"> </head> <body> <!--总体--> <d
float浮动示例
weixin_34194317的博客
12-17 57
2019独角兽企业重金招聘Python工程师标准>>> ...
浮动框架iframe
敲键盘的猫
04-18 7689
浮动框架式一种比较特别的框架，和frame比较类似。不过frame必须在frameset中才可以，而iframe不一样，首先， 他是一种内联框架，其次，他可以放在网页中的任何位置。 所以，iframe可以直接放置在中或者其他标签之中。 OK，来看下iframe的语法。 简单吧。 当然，还有其他的一些属性： 1）width:框架的宽度 2）height:框架的高度 3）
浮动特性应用实例
m0_73304951的博客
09-12 89
浮动特性应用实例
浮动、定位
李刚的学习专栏
02-24 2732
浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界。 相对定位（relative）：相对于自己原位置进行偏移，在文本流中的位置依然存在，不脱离文档流； 绝对定位（absolute）：对于position值不为static的第一位祖先元素来定位（未找到，则相对body元素），在正常流中的位置不在存在，脱离文档流； 固定定位（fixed）：一直位于可视窗口的指定位置，不受滚动条影响，脱离文档流。
[技术之禅]谈谈浮动的清除技巧
图解AI
09-16 4356
一 摘要 看了一篇文章写的非常不错,详说清除浮动,就转载过来,再其基础上补充一下,分享给大家. 二.什么是清除浮动？1.浮动的缺陷 在了解如何清除浮动之前，Kayo 先介绍为什么需要清除浮动。如本文开头所说的，浮动虽然可以便于页面布局，但同时会产生一些问题，也就是我们常说的“副作用”。而一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继
举例子写一个表格浮动案例
最新发布
06-07
好的，下面是一个简单的 HTML 表格，使用 CSS 中的浮动属性将其浮动到右侧： ```html table { float: right; margin-left: 20px; /* 为了与其他内容保持一定距离，添加左边距 */ } 姓名 年龄 性别 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值