JavaWeb入门之HTML与CSS——3.Float浮动

最新推荐文章于 2024-07-18 15:25:55 发布
最新推荐文章于 2024-07-18 15:25:55 发布
阅读量316 收藏
点赞数
分类专栏： javaweb 文章标签： css float浮动 导航条设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38368658/article/details/100739402
版权

第一章 介绍

略

第二章 float属性介绍

2-1 float基本参数的介绍

在这里插入图片描述

2-4 float文字环绕图片

tu
设置float脱离标准文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        img{
            float: right;
        }
    </style>
</head>
<body>
<img src="logo.png" alt="">
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。
</body>
</html>

在这里插入图片描述

2-5 float浮动原因及副作用分析

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        .per{
            width:500px;
            height: auto;
            border: 1px solid #000;
        }
        
        .test{
            width: 80px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }
        
        .bro{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="per">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    </div>
    <div class="bro"></div>
</body>
</html>

在这里插入图片描述
根据标准流，bro的矩形应该在红色矩形的下方，结果被红色矩形覆盖，这就是浮动的影响，带来的父元素塌陷问题。

2-7 清除浮动的四种解决办法

在这里插入图片描述

1.利用给父元素添加高度解决塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: 32px;
            border: 1px solid #000;
            
        }
        
        .test{
            width: 100px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>                
    </div>
</body>
</html>

在这里插入图片描述

2.通过clear清除内部和外部浮动

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: auto;
            border: 1px solid #000;
        }
        
        .test{
            width: 100px;
            height: 30px;
            float: left;
            background: red;
            border: 1px solid #FFF;
        }
        
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
       <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
       <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>                
        <div class="clear"></div>
    </div>
</body>
</html>

在这里插入图片描述
使用clear清除内部浮动导致的父元素塌陷

3.给父元素添加overflow属性并结合zoom：1使用

注：zoom针对ie
使用overflow和zoom结合即可有效应用于主流服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: auto;
            border: 1px solid #000;
            overflow: hidden;
            zoom:1;
        }
        
        .test{
            width: 100px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </div>
</body>
</html>

在这里插入图片描述

4.给父元素添加浮动

利用给父元素添加float解决塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: auto;
            border: 1px solid #000;
            float: left;
        }
        .test{
            width: 100px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }
        
        .bro{
            width: 100px;
            height: 100px;
            background: blue;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </div>
    <div class="bro"></div>
</body>
</html>

在这里插入图片描述

第三章 实际应用

模仿慕课网的导航栏
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        
        .head{
            width: 100%;
            height: 64px;
        }
    
        .logo{
            width: 160px;
            height: 40px;
            float: left;
        }
        
        .nav{
            width: 320px;
            height: 64px;
            float: left;
        }
        
        .nav-li{
            width: 80px;
            height: 64px;
            text-align: center;
            line-height: 64px;
            color: #333;
            float: left;
        }
        
        .icons{
            width: 320px;
            height: 64px;
            float: right;
        }
        
        .i01{
            width: 64px;
            height: 64px;
            float: left;
            background: url("001.png") center center no-repeat;
        }
        
        .i02{
            width: 64px;
            height: 64px;
            float: left;
            background: url("002.png") center center no-repeat;
        }
        
        .i03{
            width: 64px;
            height: 64px;
            float: left;
            background: url("003.png") center center no-repeat;
        }
        
        .i04{
            width: 64px;
            height: 64px;
            float: left;
            background: url("004.png") center center no-repeat;
        }
        
        .i05{
            width: 64px;
            height: 64px;
            float: left;
            background: url("005.png") center center no-repeat;
        }        
    </style>
</head>
<body>
    <div class="head">
        <div class="logo">
            <img src="logo.png" width="160" height="40" alt="">
        </div>
        <div class="nav">
            <div class="nav-li">实战</div>
            <div class="nav-li">路径</div>
            <div class="nav-li">猿问</div>
            <div class="nav-li">手记</div>
        </div>
        <div class="icons">
            <div class="i01"></div>
            <div class="i02"></div>
            <div class="i03"></div>
            <div class="i04"></div>
            <div class="i05"></div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

Elylicery
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java网页搭建--float浮动
Java小白的自学之路
03-25 554
CSS定位机制： 三种： 普通流： 宽元素特征： 行内元素特征： 测试代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>block、inline</title> &...
JavaWeb_CSS（11）_div 和 span_浮动
魏宇轩
03-12 701
div 浮动 HTML 页面的标准文档流（默认布局）是：从上到下，从左到右，遇块（块级元素）换行。 浮动层：给元素的 float 属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素（默认为body文本区域）的左右边框。而此浮动元素在文档流空出的位置，由后续的（非浮动）元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。 Float 有 4 个值 left...
web----浮动
weixin_53163211的博客
09-14 689
父元素不设置高度的情况下，高度由子元素撑开，一旦子元素设置浮动，父元素会失去高度进而影响后面元素布局。2.动态向父元素后面添加一个clear：both的块属性元素。1.给父元素设置overflow：hidden。右浮动（默认以右边为起始点/开始位置）1.让块属性元素排成一行，解决水平布局问题。左浮动（默认以左边为开始位置）注意点：排成一行的元素都需要设置浮动。2.一个移动，其他元素会跟着移动。2.让行属性标签支持设置宽高。用途：让行属性元素支持设置宽高。1.代码换行默认有空隙。
HTML之float浮动
JavaWeb_Hao的博客
03-28 4854
可以看一下大神的理解很详细：https://blog.csdn.net/qq_20404903/article/details/49024247一、浮动的理解   浮动的框可以向左向右移动，知道它的外边缘碰到包含框（父亲框）或者其他的浮动框位置，因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就行浮动框不存在一样二、浮动的分类：   left:   左浮动   right:   右浮动...
Java浮点数类型（float和double）总结
大头客的专栏
11-22 5250
记得刚入行的时候，就有前辈谆谆教导，在Java里面如果是要做数值的精确计算，一定不要用float/double，而要以BigDecimal代替，原因大概是浮点数类型会失真，记不准。当时就记住了这个结论，也一直没去深究，每次跟别人讨论还都振振有词，今天突然发现自己好像对其中的原理也没有太弄明白，今天正好整理一下。 1、浮点数类型为什么会失真？ 2、既然浮点数会失真，那为什么还要用它呢？那
Java0基础_day16_Javaweb前端_HTML_CSS_mysql（csdn）————程序.pdf
12-01
HTML（超文本标记语言）是用于创建网页的标准标记语言，它允许通过一系列预定义的标签来定义网页的结构、内容和样式。HTML 的语法非常严格，所有标签都有固定的格式，且不区分大小写。HTML 命令主要分为单目和双目...
JavaWeb学习笔记，包括简单的HTML、CSS、JS.zip
01-01
html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习...
JavaWeb——Servlet.docx
06-20
Servlet并不是一个具体的类，而是一个接口，它定义了服务器与Servlet之间的交互方式。任何实现了Servlet接口的类都可以称为Servlet。在JavaWeb应用中，Servlet主要用于扩展基于HTTP协议的Web服务器功能。 Servlet的...
基于javaweb农业产品销售管理系统框架 idea + html + css + vue.js + java + maven
06-15
基于javaweb农业产品销售管理系统 框架 idea + html + css + vue.js + java + maven + ssm + mysql localhost:8080 管理员用户密码 admin 123456 普通用户密码 qqq 123456 模块介绍 管理员 个人资料 子模块...
java float 详解
hjm4702192的专栏
12-21 3万+
数据类型关键字内置类内存占用字节数可存储的取值范围默认值布尔型booleanBoolean1字节true，falsefalse字符型charCharacter2字节16位Unicode字符，可容纳各国字符集。Unicode范围为‘\u0000’到‘ufff’。整数范围是0~65535。例如，65代表‘A’，97代表‘a’‘\u0000’Null字节型byteByte1字节-128~127（-27~
css中3种清除浮动方法
05-13
css中3种清除浮动方法css中3种清除浮动方法
CSS 学习总结（4）--- CSS中的 float 浮动
qq_44823091的博客
06-24 179
JAVA Web — CSS 中的浮动（float） 先说一下标准文档流， 1. 标准文档流 Web页面的制作，是个““流”，必须从上而下，像”织毛衣“。 标准文档流有以下特性： 空白会折叠，当出现多个空格、换行、tab时，都会折叠为一个空格。 高矮不齐，底边对齐。 自动换行，一行写不满，换行写。 在HTML中，标签分为文本级和容器级别。 ​ 文本级标签：p、span、a、b、img、...
【Web】CSS中的浮动float
渐若窥宏大的博客
02-21 2006
CSS中的float 文章目录CSS中的float1、float浮动属性2、float文字环绕图片3、float浮动的真正原因以及副作用分析4、清除浮动的四种解决方法5、实际应用 导航效果 复习一波 简单记录 - 慕课网 - 从网页搭建入门JavaWeb 1、float浮动属性 float中的四个参数 float:left; 左浮动 float:right;右浮动 float:none;不浮动 ...
Web前端开发笔记21——float浮动
DRLDER的博客
04-19 1148
1.传统网页布局的三种方式： 普通流（标准流） 浮动 定位 2.标准流：就是标签按照规定好默认方式排列。 3.多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。 4.float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 5.浮动特性： 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标） 浮动的盒子不再保留原先的位置。 浮动具有行内块元素的特点。如果给行内元素或是其他类型元素添加浮动，那么就会让此元素具有行内块元素相似的
Java中 float、double使用注意问题
z199106jin的专栏
02-11 7940
在java中运行一下代码 System.out.println(2.00-1.10); 输出的结果是：0.8999999999999999 很奇怪，并不是我们想要的值0.9 再运行如下代码： System.out.println(2.00f-1.10f); 输出结果：0.9 又正确了，为什么会导致这种问题？程序中为什么要尽量避免浮点数比较？ 在java中浮点型默认是do
Java中float的取值范围
热门推荐
treeroot的专栏
09-05 4万+
规格化表示       java中的浮点数采用的事IEEE Standard 754 Floating Point Numbers标准,该标准的规范可以参考http://blog.csdn.net/treeroot/articles/94752.aspx.      float占用4个字节,和int是一样,也就是32bit.      第1个bit表示符号,0表示正数,1表示负数,这个很好理解,不
Tailwind CSS：颠覆常规的实用主义设计利器
最新发布
艾恩小灰灰的博客
07-18 240
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
JavaWeb入门测验：HTML、CSS、DOM与JavaScript基础
在《JavaWeb程序设计案例教程》的课后习题部分，第一章着重考察了学生对基础Web技术的理解。首先，课程要求学员掌握HTML、CSS、DOM和JavaScript的基本概念： 1. HTML (HyperText Markup Language)：作为网页的结构...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值