html浮动的用法

简介: html浮动的用法

一.什么是浮动(float)?

浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动,都会紧挨着上一个元素)

二.浮动(float)语法:

float:left或者right或者none或者inherit

left:让元素向左浮动

right:让元素向右浮动

none:让元素不浮动

inherit:让元素从父级继承浮动属性

三.浮动的特性

1.支持所有的css样式

2.内容撑开宽高

3.多个元素设置浮动,会排在一排

4.脱离文档流

5.提升层级半级

也就是说:一个元素设置了浮动属性后,下一个元素就会无视这个元素的存在,但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围

注意:不管是什么属性的元素,如果设置了浮动属性,该元素就变成了具有inline-block属性的元素

四.浮动的具体表现

1、如果三个元素为block元素,在未设置浮动前

html样式:

1

2

3

<divclass="class1">我是块级元素1,没有设置浮动</div>

<divclass="class2">我是块级元素2,没有设置浮动</div>

<divclass="class3">我是块级元素3,没有设置浮动</div>

css样式为:

1

2

3

.class1{width:100px;height:100px;background:palegreen;}

.class2{width:120px;height:130px;background:gold;}

.class3{width:160px;height:180px;background:red;}

相关文章
|
9天前
|
移动开发 前端开发 JavaScript
HTML 框架高阶用法
HTML框架,或前端框架,如Bootstrap、Vue.js等,显著提升了Web应用开发的速度与用户体验。本文介绍了一些高级技巧,如自定义样式与组件、响应式设计实践、JavaScript功能增强及性能优化策略等,帮助开发者更好地利用这些工具,实现高效开发并提升应用性能与灵活性。
|
11月前
|
安全 Java Spring
【Java用法】Java 过滤html标签获取纯文本信息
【Java用法】Java 过滤html标签获取纯文本信息
192 0
|
11月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
304 0
|
14天前
|
前端开发 JavaScript
html图像属性的高级用法
在HTML中,通过结合CSS、JavaScript及其他HTML元素,可以实现图像属性的高级用法,例如响应式图像、懒加载、图像映射、CSS滤镜、SVG图像、图像作为背景以及使用JavaScript动态更改图像。
|
18天前
|
前端开发 JavaScript
html中id和class的相同和不同之处及用法的规范与区别
在HTML中,`id`和`class`都用于标识和选择元素,但存在一些关键差异。
|
21天前
|
前端开发 JavaScript 开发者
html<p>标签的用法
`&lt;p&gt;` 标签主要用于定义段落,但在网页设计中也有创新用法,如用作容器、自定义样式、响应式设计调整、嵌套结构创建、伪元素及伪类应用、添加微数据和属性,以及增强可访问性等,这些方法可在保证语义清晰的前提下提升页面表现力。
|
20天前
|
前端开发 搜索推荐 UED
html标题的进阶用法
HTML标题不仅提升文档结构和内容层级,还助力SEO及用户体验。应按重要性递减使用`&lt;h1&gt;`至`&lt;h6&gt;`,通常仅一个`&lt;h1&gt;`为主标题。合理的标题结构利于屏幕阅读器导航,搜索引擎分析标题以理解页面内容,含关键词的标题可提高排名。避免过度优化,利用CSS自定义标题样式,保持设计一致性。响应式设计使标题适应不同屏幕尺寸。嵌套使用时保持逻辑清晰,避免单纯为改变样式而滥用标题标签,使用`&lt;span&gt;`加CSS类替代。在`&lt;head&gt;`中定义页面标题,对SEO至关重要。
HTML中font标签用法
这篇文章详细介绍了HTML中`<font>`标签的用法,包括如何分别设置字体风格(`font-style`)、字体粗细(`font-weight`)、字体大小(`font-size`)和字体类型(`font-family`),并通过实例代码演示了如何综合使用这些属性来定义文本的字体样式。
HTML中font标签用法
HTML基础知识(3)浮动、塌陷问题
这篇文章介绍了HTML中的浮动布局、浮动元素如何影响页面布局以及如何解决浮动元素引起的高度塌陷问题。
HTML基础知识(3)浮动、塌陷问题
|
1月前
|
移动开发 数据挖掘 API
HTML5 中 Web Workers API 的用法
【8月更文挑战第24天】
34 0