尚硅谷html5+css3(4)浮动

简介: 尚硅谷html5+css3(4)浮动

1.浮动的概念

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /*通过浮动可以使一个元素向其父元素的左侧或右侧移动
                使用float属性设置子资源的浮动
                可选值:
                    none默认值,元素不浮动
                    left向左浮动
                    right向右浮动
                注意,元素设置浮动以后,水平布局的等式不用必须满足
                    且从文档流中脱离,不再占用文档流的内容
                    所以box2(在文档流中)会向上移动
                */
            float: left;
        }
    /*浮动的特点:
        1.浮动元素会完全脱离文档流,不再占据文档流的位置
        2.设置浮动以后元素会向父元素的左侧或右侧移动,
        3.浮动元素默认不会从父元素中移出
        4.浮动元素向左或向右移动时,不会超过它前面的其他浮动元素
        5.如果浮动元素的上面是不浮动的块元素,则浮动元素无法上移
        6.浮动元素不会超过它上面浮动的兄弟元素
    简单总结:浮动目前来讲它的主要作用是让元素可以水平排列
        可以制作一些水平布局
        */
        .box2 {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            /*或者box2也设置浮动,这样可以横向排列*/
            float: left;
        }
    </style>
</head>
 
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>


841d005c8d6941c48e693e9f42c85f6f.jpg

2.浮动的特点

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        /*脱离文档流的特点
            块元素:
                1.块元素不会独占页面的一行
                2.脱离文档流以后,块元素的宽度和高度默认都被内容撑开
            行内元素:
                行内元素脱离文档流后会变成块元素,特点和块元素一样
            脱离文档流后,不再区分块和行内*/
        .box1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            /*浮动元素不会盖住文字,文字会自动环绕在浮动元素周围
          所以可以用浮动设置文字环绕效果*/
            float: left;
        }
 
        .box2 {
            background-color: yellowgreen;
            /*设置浮动后,背景不会占满一行,而是只占文字的部分*/
            float: left;
        }
 
        .box3 {
            background-color: orange;
            /*设置浮动后,背景不会占满一行,而是只占文字的部分*/
            float: left;
        }
    </style>
</head>
 
<body>
    <div class="box1"></div>
    在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。
    <div class="box2">hello2</div>
    <div class="box3">hello3</div>
</body>


1964fcaf329f417c811862f3e683c8c3.jpg

相关文章
|
8天前
|
前端开发 容器
CSS基础-浮动:float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性,用于创建多列布局和图文混排,但会导致浮动塌陷和元素重叠问题。为解决这些问题,文章探讨了`clear`属性的四种清除浮动方法,包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起,它们在某些场景下替代了浮动,但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
3天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
8 1
|
3天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
9 2
|
4天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
15 0
|
4天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
13 0
|
5天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
11 2
|
5天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
19 3
|
5天前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
24 2
|
11天前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
15 0