返回顶部
首页 > 资讯 > 前端开发 > VUE >css浮动的特性有哪些
  • 261
分享到

css浮动的特性有哪些

2024-04-02 19:04:59 261人浏览 独家记忆
摘要

小编给大家分享一下CSS浮动的特性有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!块元素在文档流中默认垂直排列,所以多个di

小编给大家分享一下CSS浮动的特性有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

块元素在文档流中默认垂直排列,所以多个div从上至下依次排开

如果希望块元素在页面中水平排列,可以使用float来使元素浮动,从而脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动

css浮动的特性

1.浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围

2.元素浮动以后,会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素

3.如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素

4.浮动的元素永远不会超过他上边的兄弟元素,最多一边挤

5.块元素脱离文档流以后,默认的高度和宽度都丢失.高宽会被内容撑开(不再是默认的占父元素100%)(这是脱离文档流的特点,不仅仅是浮动才会这样)

6.内联元素脱离文档流后,会变成块元素(所有元素一旦脱离文档流.全都会变成块元素)

css浮动的特性有哪些

<style>
body{color:#FFFFFF;}

.box1{
width: 400px;height: 100px;

background-color:red;
float: left;    
}
.box2{
width: 400px;height: 100px;
background-color:Black;
float: left;    
}
.box3{
width: 100px;height: 100px;
background-color:Blue;
float: right;   
}
</style>

<div >
    <div class="box1">box1左浮动</div>
    <div class="box2">box2左浮动</div>
    <div class="box3">box3右浮动(为什么不到右上角?)</div>
    <!--浮动的元素永远不会超过他上边的兄弟元素,最多一边挤-->
</div>
WEB前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频,pdf

浮动的影响与清除浮动

在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。

但是子元素浮动后,因为脱离了文档流,所以子元素无法撑起父元素的高度.导致父元素高度消失.后面的元素都将会向上移动.最终导致页面布局混乱。

清除浮动方法1(针对父子元素):

给父元素指定一个高度直接写死(不推荐)

清除浮动方法2(针对父子元素):

给父元素开启BFC。

清除浮动方法3:清除浮动clear(针对兄弟元素)

clear可以用来清除其他浮动元素对当前元素的影响,仅仅是清除影响,清除浮动后.元素会回到其他元素浮动之前的位置

如果前面的元素是左浮动:clear:left

如果前面的元素是右浮动:clear:right

| 值 | 描述 |
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。(清除对元素影响最大的那个元素浮动) |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |

清除浮动导致高度塌陷问题(父子元素):

可以直接在高度塌陷的父元素的最后,添加一个空白的div,并设置clear

但是此方法会添加冗余代码.因此可使用css进行添加伪元素:

.父元素:after{
content:"";
display:block;
clear:both;
}

以上是“css浮动的特性有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: css浮动的特性有哪些

本文链接: https://www.lsjlt.com/news/83879.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • css浮动的特性有哪些
    小编给大家分享一下css浮动的特性有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!块元素在文档流中默认垂直排列,所以多个di...
    99+
    2024-04-02
  • CSS中浮动有哪些特性
    这篇文章将为大家详细讲解有关CSS中浮动有哪些特性,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。浮动具有以下特性:盖不住的文本浮动元素后面不是块级元素,后面的元素将会和它...
    99+
    2024-04-02
  • CSS浮动的基本特点有哪些
    CSS浮动的基本特点有以下几点:1. 元素浮动后会脱离正常文档流,不再占据原先的位置,可以自由移动到父元素的左侧或右侧,直到遇到另一...
    99+
    2023-10-12
    CSS
  • css浮动有什么特性
    这篇文章主要讲解了“css浮动有什么特性”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css浮动有什么特性”吧!说明浮动元素会从普通文档流中分离出来,但浮动元素不仅会影响自己,还会影响周围元...
    99+
    2023-06-20
  • CSS的特征性有哪些
    本篇内容介绍了“CSS的特征性有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.继承性:某些属性在定...
    99+
    2024-04-02
  • css新特性有哪些
    这篇文章给大家分享的是有关css新特性有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在浏览器开始实现它们之前,CSS 新的功能通常需要经过长时间讨论之后,才在W3联盟的规范中定义。 有许多值得一提的 CSS...
    99+
    2023-06-15
  • css有哪些清除浮动的方法
    本篇内容主要讲解“css有哪些清除浮动的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css有哪些清除浮动的方法”吧!1、{clear:both;}设置了c...
    99+
    2024-04-02
  • css的浮动属性是什么以及其属性值有哪些
    这篇文章将为大家详细讲解有关css的浮动属性是什么以及其属性值有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。在css中,浮动属性是“float”,用于...
    99+
    2024-04-02
  • CSS清除浮动方法有哪些
    这篇文章主要介绍CSS清除浮动方法有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、设置父元素高度如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动只要...
    99+
    2024-04-02
  • css中清除浮动的方式有哪些
    这篇文章主要为大家展示了css中清除浮动的方式有哪些,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“css中清除浮动的方式有哪些”这篇文章吧。css是什么意思css是一种用来表现HTML或XML等文...
    99+
    2023-06-06
  • css清除浮动float的方法有哪些
    这篇文章主要介绍css清除浮动float的方法有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css清除浮动float的三种方法:1、在父元素结尾添加一个具体“clear: both;”样式的新元素。2、给父级d...
    99+
    2023-06-14
  • css清除浮动常用的方法有哪些
    这篇文章主要介绍“css清除浮动常用的方法有哪些”,在日常操作中,相信很多人在css清除浮动常用的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css清除浮动常用的...
    99+
    2024-04-02
  • CSS浮动float的基础知识点有哪些
    这篇文章主要为大家展示了“CSS浮动float的基础知识点有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS浮动float的基础知识点有哪些”这篇文章吧...
    99+
    2024-04-02
  • Css清楚浮动的常用方式有哪些
    小编给大家分享一下Css清楚浮动的常用方式有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!在使用css布局当中,经常会用到使用浮动布局,但是浮动之后元素就会产生脱离文档流而浮动在页面上...
    99+
    2024-04-02
  • 在css中有哪些清除浮动的方法
    今天就跟大家聊聊有关在css中有哪些清除浮动的方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。css清除浮动的方法:1、在父标签结尾处,添加具有“clear:both”样式的空di...
    99+
    2023-06-14
  • css中浮动产生负作用有哪些
    小编给大家分享一下css中浮动产生负作用有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 1、后盾不克不及展示 因为浮动...
    99+
    2024-04-02
  • CSS动画属性有哪些
    CSS动画属性有以下几种:1. animation-name:指定一个关键帧动画的名称。2. animation-duration:...
    99+
    2023-10-12
    CSS
  • DIV+CSS清除浮动常用的方法有哪些
    这篇文章主要讲解了“DIV+CSS清除浮动常用的方法有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“DIV+CSS清除浮动常用的方法有哪些”吧! DI...
    99+
    2024-04-02
  • CSS定位机制中的浮动种类有哪些
    这篇文章给大家分享的是有关CSS定位机制中的浮动种类有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。CSS 有三种基本的定位机制:相对定位、浮动和绝对定位。接下来讲解一下浮动...
    99+
    2024-04-02
  • DIV+CSS清除浮动常用方法有哪些
    这篇文章主要介绍“DIV+CSS清除浮动常用方法有哪些”,在日常操作中,相信很多人在DIV+CSS清除浮动常用方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”DIV+...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作