html css浮动效果的实现

最新推荐文章于 2022-10-17 17:53:56 发布
最新推荐文章于 2022-10-17 17:53:56 发布
阅读量761 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoqingru0311/article/details/118631225
版权

css浮动效果的实现

在这里插入图片描述

1、浮动效果演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 80px;
            border: 1px solid goldenrod;
            margin: 50px auto 0;
            /*font-size: 0;*/
        }

        .box div{
            width: 60px;
            height: 60px;
            /*display: inline-block;*/
            margin: 10px;

        }
        .box1{
            background-color: #5bc0de;
            float: left;        /*即贴近父级的边界*/
        }
        .box2{
            background-color: yellow;
            float: right;        /*即贴近父级的边界*/
        }

        .box4{
            width: 400px;
            height: 400px;
            border: 1px solid ;
            margin: 0px auto;
        }

        .box4 div{
            width: 100px;
            height: 100px;
            background-color: #f0ad4e;
            margin: 15px ;
            float: left;
            font-size: 25px;
            text-align: center;
            color: #5bc0de;
            line-height: 100px;

        }

    </style>
</head>
<body>
        <div class="box">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>

<!--        .box4>div{$}*9-->
        <div class="box4">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

2、制作文字饶图的效果

浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作文字饶图的效果</title>
    <style type="text/css">
        .box{
            width: 450px;
            height: 210px;
            border: 1px solid goldenrod;
            margin: 50px auto 0;
        }
        .pic{
            width: 80px;
            height: 80px;
            background-color: pink;
            float: left;
            margin: 10px;
        }
        .text{
            background-color: #31b0d5;
            height: 150px;
            color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic"><img src="images/003-02.gif" height="80px" width="80px"></div>
        <div class="text">元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：</div>
    </div>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

3、清除浮动

即解决子元素浮动而父级元素撑不开的方式

在这里插入图片描述

1、第一种清除浮动的方式：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动示例-即解决子元素浮动而父级元素撑不开的方式</title>
    <style type="text/css">
        .list{
            width: 210px;
            /*height: 400px;*/
            border: 1px solid goldenrod;
            margin: 50px auto 0;
            padding: 0;
            overflow: hidden;   /*方式一：第一种清除浮动的方法*/

        }

        .list li{
            width: 50px;
            height: 50px;
            background-color: pink;
            list-style: none;
            margin: 10px;
            float: left;

        }

    </style>
</head>
<body>
    <!--    ul.list>li{$}*8-->
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

运行效果如下所示：
在这里插入图片描述

2、第二种清除浮动的方式

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动示例-即解决子元素浮动而父级元素撑不开的方式</title>
    <style type="text/css">
        .list{
            width: 210px;
            /*height: 400px;*/
            border: 1px solid goldenrod;
            margin: 50px auto 0;
            padding: 0;
            /*overflow: hidden;   !*方式一：第一种清除浮动的方法*!*/
        }
        .list li{
            width: 50px;
            height: 50px;
            background-color: pink;
            list-style: none;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <!--    ul.list>li{$}*8-->
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <div style="clear:both"></div>
    </ul>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

3、第三种清除浮动的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动示例-即解决子元素浮动而父级元素撑不开的方式</title>
    <style type="text/css">
        .list{
            width: 210px;
            /*height: 400px;*/
            border: 1px solid goldenrod;
            margin: 50px auto 0;
            padding: 0;
            /*overflow: hidden;   !*方式一：第一种清除浮动的方法*!*/
        }
        .list li{
            width: 50px;
            height: 50px;
            background-color: pink;
            list-style: none;
            margin: 10px;
            float: left;
        }
        /*解决margin-top塌陷的问题*/
        .clearfix:before{
            content: "";
            display: table;
        }

        /*方式三： 使用伪元素选择器通过样式，往元素里面塞入内容    */
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <!--    ul.list>li{$}*8-->
    <ul class="list clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>

<!--        <div style="clear:both"></div>      &lt;!&ndash;方式二：第二种清除浮动的方法&ndash;&gt;-->
    </ul>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

在这里插入图片描述

郭庆汝
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css浮动效果
VibMike的博客
09-28 1876
1、首先给页面写入一个div 2、给一个类名 3、style用类选择器选择到它 4、给这个div写一个宽度 5、然后是高度 6、写背景颜色 7、设置float;left 8、如此再写一个div 9、设置浮动，这次是float:right 10、效果如下，两个div已经脱离原先的文档流，所以可以并排显示 ...
HTML图片随意浮动广告效果代码
03-30
我也是在学习的过程在网上找的 找了半天才找到 希望对你们有用
html布局+浮动效果
a240454386的专栏
04-21 738
marquee       本周畅销书   width="200" height="200" direction="up" scrolldelay="100" scrollamount="2" bgcolor="#eeeeee">     福尔摩斯探案全集   盗墓笔记   鬼吹灯之精绝古城
CSS浮动
Q_ooo_的博客
06-22 94
一般作用：让多个块级盒子（div）水平排列成一行浮动语法规则：选择器{ float:属性值 } 属性值： none:元素不浮动 left:元素左浮动 right:元素右浮动浮动元素的特性：1. 浮动元素会脱离标准流(脱标) 2. 浮动的多个元素会一行内显示并且元素顶部对齐 3．浮动的元素会具有行内块元素的特性，4.浮动的盒子不再保留原先的位置，4.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列浮动应用：应用1：浮动和标准流的父盒子搭配使用；应用2：让其中一个元素浮动到想要摆放的位置清
html里怎么写浮动效果,css浮动怎么写?
weixin_39852953的博客
06-03 138
Css样式的float浮动属性，用于设置标签对象(如：标签盒子、标签、标签、标签等html标签)的浮动布局。float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。注释：假如在一行之上只有极少的空间可供浮动元素，...
HTML5里浮动效果的说明与展示
L20220927Y的博客
10-17 762
HTML5里浮动效果的说明与展示
HTML+CSS+JavaScript实现企业展示官网，HTML5期末大作业
03-27
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。 网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上...
基于jQuery+CSS实现的浮动html菜单效果分享代码.zip
11-21
基于jQuery+CSS实现的浮动html菜单效果分享代码.zip
网页设计HTML、CSS和JS网页设计HTML、CSS和JS
最新发布
05-06
html css js网页设计 标题：HTML、CSS和JS：打造出色的网页设计 概述：网页设计是一门综合性的艺术...CSS还支持布局技术，如弹性盒子布局、网格布局、浮动等，以实现不同的网页布局效果。 3. JS的交互和动态效果 J
网页大作业仿《原神》官网 HTML+CSS
04-23
照片墙用了固定定位，过渡效果var函数并且运用了伪类选择器来实现复选框默认被选中技术；角色情报对其中的文字介绍进行了绝对定位和溢出隐藏等；玩家评论正常流布局和溢出隐藏，用了js插入了背景音乐实现点击视口...
网页上图片浮动效果
04-03
网页上图片浮动效果，javascript，效果一般
网页设计之菜单鼠标浮动效果
weixin_34302561的博客
12-28 203
第一步：菜单栏的UI设计： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>Demo</title> <link href="css/caidan.css" rel="stylesheet" type=...
html图片浮动特效
热门推荐
congcong7267的博客
03-19 1万+
html图片浮动特效html代码：  &lt;div &gt;    &lt;table border="0" &gt;    &lt;tr &gt;    &lt;td width="200",height="300"&gt;&amp;nbsp;&lt;/td&gt;    &lt;td width="200",heigh
html css 浮动
jialan75的博客
01-29 119
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
HTML CSS--浮动
聽凨不是雨的博客
07-29 109
HTML CSS--浮动 浮动，简而言之的意思就是说，元素脱离文档流的控制，自己漂浮在文档流之上 div----块级元素，在页面中独占一行，排列方式为上下排列 从上可以看出，“a1”的宽度很小，在一个网页中，a2完全可以放到a1后面，但是图中并没有这样排列，因此得出，块元素是独占一行的，这就是标准流。 那么 要如何让多个div（块级元素）在同一行显示呢，这便要用到 浮动了。 浮动 ...
html盒子浮动效果,有关CSS盒子浮动的方法详解
weixin_33212421的博客
06-04 3363
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不在伸展，而是根据盒子里面的内容的宽度来确定。准备基础代...
html+css之浮动
renshaoqi的博客
02-26 228
文章目录一. float 浮动1.1 float1.2 浮动规则二. float 案例 在css中，有3种常用的方法对元素进行定位、布局 normal flow：标准流、常规流、文档流（从左到右、从上到下依次布局） 定位：静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed) 浮动：left、right 绝对定位、浮动都会让元素脱离文档流，以达到灵活布局的效果 一. float 浮动 1.1 float none left right 1.2
『HTML&CSS』浮动
叄拾叄画生
10-12 430
文档流。元素在文档流中的特点。浮动。元素浮动的特点。元素脱离文档流的特点。简单布局。
HTML布局方式：浮动
MCdongchao的博客
05-18 1690
float 块元素在文档流中默认是垂直排列，如果希望块元素横向布局，可以用float float 可以使元素浮动，向父元素的左侧或右侧浮动，脱离文档流 可选值： none 默认值 不浮动 left 像页面的左侧浮动 right 像页面的右侧浮动 浮动的特点 1:浮动元素脱离文档流之后，不会再占有文档流的位置，它下边的元素会立即向上移动 2:元素浮动之后，元素会尽量的向页面的左上或右上浮动 3:浮动元素默认会在父元素区域内活动，不会从父元素中移出 4:浮动元素上面是一个没有浮动块
css实现div上下浮动的效果
06-13
要实现div上下浮动的效果，可以使用CSS3动画和关键帧来实现。具体步骤如下： 1. 首先，需要定义一个包含需要浮动的div的容器，比如： ```html <div class="container"> <div class="float-div"></div> </div> ``` 2. 然后，在CSS中定义浮动的div的样式，包括宽高、背景颜色等基本属性，以及定位和动画属性，如下： ```css .container { position: relative; height: 400px; background-color: #eee; } .float-div { position: absolute; width: 50px; height: 50px; background-color: #f00; animation: float 2s ease-in-out infinite; } @keyframes float { 0% { bottom: 0; } 50% { bottom: 50px; } 100% { bottom: 0; } } ``` 3. 在上面的样式中，通过设置`.float-div`的`position`为`absolute`，并且定义了动画`animation: float 2s ease-in-out infinite;`，其中`float`是定义的动画名称，`2s`是动画持续时间，`ease-in-out`是动画速度缓动函数，`infinite`表示无限循环播放。 4. 最后，在关键帧中定义浮动的效果，通过设置`bottom`属性的值，让元素在垂直方向上上下浮动。 通过上述步骤，就可以实现div上下浮动的效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值