首页 > 其他分享 >CSS实现浮动效果

CSS实现浮动效果

时间:2024-05-14 23:29:49浏览次数:21  
标签:浮动 效果 color 元素 100px width background CSS

一、浮动

早期用于实现文字环绕图片(环绕布局),现在用于让元素并列布局(块元素并排)。浮动元素会脱离文档流,后边的元素会把空出来的位置补上去。但是又因为浮动元素的层级高,所以会将未浮动的元素进行覆盖,但是文字不会。

  • floatnone无浮动,left左浮动,right右浮动。

1、css布局的三种机制

  • 标准文档流,也叫标准流,普通流。主要实现上下布局,也就是页面布局的默认效果。
  • 浮动流,通过float实现并列显示的布局。
  • 定位流,通过position实现元素的层叠显示的布局。

2、浮动布局的特点

(1)浮动元素会以顶对齐,且没有缝隙紧挨着的方式进行显示。

(2)如果元素集体右浮动,显示的顺序会发生颠倒。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <head>     <style>         .demo1,.demo2{             width: 100px;             height: 100px;             float: right;         }         .demo1{             background-color: pink;         }         .demo2{             background-color: yellowgreen;         }     </style> </head> <body>     <div class="box">         <p class="demo1">1</p>         <p class="demo2">2</p>     </div> </body>

(3)浮动的元素会因为当前容器的横向距离不足以摆放的时候,而发生换行。

如果元素的高度都是相等的,那就是另起一行的效果;如果元素的高度呈阶梯状,后续的元素在顶对齐放不下的情况下,会向下落到第一个障碍处停下来,且其之后的元素会排在它的后面。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <head>     <style>         .box{             width: 1000px;             /* border: 1px solid #000; */             margin: 100px auto;         }         p{             float: left;         }         .demo1{             width: 400px;             height: 100px;             background-color: pink;         }         .demo2{             width: 400px;             height: 50px;             background-color: yellowgreen;         }         .demo3{             width: 100px;             height: 30px;             background-color: bisque;         }         .test{             width: 300px;             height: 100px;             background: skyblue;         }         .demo4{             width: 80px;             height: 50px;             background-color: purple;         }     </style> </head> <body>     <div class="box">         <p class="demo1"></p>         <p class="demo2"></p>         <p class="demo3"></p>         <p class="test"></p>         <p class="demo4"></p>     </div> </body>

上述代码给父元素设置的宽度为1000px,粉色、绿色、肉色的盒子加在一起已经900px了,不足以放下蓝色盒子600px,所以放到了下层,而紫色盒子也跟在其后,即使第一行有足够的空间。

(4)浮动元素脱离文档流,提升元素的层级。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <head>     <style>         *{             margin: 0;             padding: 0;         }         .box{             width: 300px;             /* border: 1px solid #000; */             margin: 100px auto;         }         p{             width: 100px;             height: 100px;         }         .demo1{             background-color: pink;         }         .demo2{             width: 50px;             height: 50px;             background-color: yellowgreen;             float: left;         }         .demo3{             background-color: skyblue;         }     </style> </head> <body>     <div class="box">         <p class="demo1"></p>         <p class="demo2"></p>         <p class="demo3"></p>     </div> </body>

绿色盒子添加浮动后,脱离了文档流,浮在了蓝色盒子的上面。

(5)实现并列布局的元素都要增加浮动属性。

(6)浮动的元素设置 margin:0 auto 无效。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <head>     <style>         *{             margin: 0;             padding: 0;         }         .box{             width: 100px;             height: 100px;             background-color: pink;             margin: 0 auto;             float: left;         }     </style> </head> <body>     <div class="box"></div> </body>

可以看出当我们添加浮动属性之后,margin:0 auto居中失效。

(7)浮动的元素会转变成块元素。

1 2 3 4 5 6 7 8 9 10 11 12 <head>     <style>         span{             background-color: pink;             padding: 30px;             float: left;         }     </style> </head> <body>     <span></span> </body>

这里可以看出原本的行内元素在添加浮动后,可以设置padding值,同样也可以设置宽高。没设置宽高的时候,宽高会根据内容自动撑开,而不是显示独占一行。

二、浮动对元素的影响及解决方法

1、浮动对元素的影响

  • 子元素浮动会引起父元素的高度塌陷。
  • 块元素浮动之后,默认宽度不会显示成父元素100%的效果了,而是靠内容撑开,但是设置宽高依然有效。
  • 行内元素、行内块元素增加浮动会被隐性转换成块元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <head>     <style>         .wrap{             width: 300px;             border: 1px solid #000;         }         .box{             width: 100px;             height: 100px;                          float: left;         }     </style> </head> <body>     <div class="wrap clearFix">         <p class="box"></p>     </div> </body>

2、解决高度塌陷的方法

(1)给父元素设置定高。

但是不能自适应高度,局限性较大,不推荐。

(2)开启BFC(块级格式化上下文)

给父元素添加overfloat:hidden。因为父元素在没设置高度时,不知道在哪个位置隐藏。该方法前提是父元素不能设置定高,相对推荐。

1 2 3 4 5 .wrap{     width: 300px;     border: 1px solid #000;     overflow: hidden; }
  • 给父元素添加浮动。但是浮动会脱离文档流,对页面的影响较大,而且还可能会引起新的塌陷问题。不推荐。
  • 给父元素添加绝对定位或固定定位。但也会脱离文档流,造成新的页面问题,不推荐。

(3)改变父元素的类型为inline-block

因为浮动只对块元素有效。但是行内块元素会因为换行符有留白。而且margin:0 auto不能居中显示,这时想要居中可以给父元素设置text-align:center

(4)清除浮动clear(额外标签法)

在浮动元素的后面添加一个空白标签,给它设置清除浮动属性,从而撑开父元素的高度。
清除浮动是设置给被影响的元素,不是设置给浮动的元素。
该属性只对块元素生效。

clearnone默认值,会被浮动元素遮挡;left不会被向左浮动的元素遮挡,显示在浮动元素的下面;right不会被向右浮动的元素遮挡,显示在浮动元素的下面,both不会被左右两边的浮动元素遮挡,显示在浮动元素的下面。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <head>     <style>         .wrap{             width: 300px;             border: 1px solid #000;         }         .box{             width: 100px;             height: 100px;             background-color: pink;             float: left;         }         .test{             clear: both;         }     </style> </head> <body>     <div class="wrap clearFix">         <p class="box"></p>         <p class="test"></p>     </div> </body>

(5)万能解决法

最终的解决方法是通过给父元素设置伪元素添加clear属性来解决浮动带来的问题。
因为我们需要在父元素后面增加一个元素,用于设置清除浮动,所以使用::after。该伪元素是不需要任何其他内容的,但是content是必须添加的。又因为clear只对块元素生效,而伪元素默认添加的是行内元素,所以必须通过display:block修改元素的类型。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <head>     <style>         p{             width: 100px;             height: 100px;             backgroud-color: pink;             float: left;         }         .clearFix{             /* 用于兼容低版本ie 开启haslayout */             *zoom: 1;         }         .clearFix::after{             content: "";             display: block;             clear: both;         }     </style> </head> <body>     <div class="clearFix">         <p><p>     <div> </body>

标签:浮动,效果,color,元素,100px,width,background,CSS
From: https://www.cnblogs.com/suducn/p/18192503

相关文章

  • vue2小效果的实现
    代码量:100行左右搏客量:1所用时间:1h<!--components文件中的Person.vue--><template><divclass="person"><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><button@click="changeName">......
  • CSS cursor(鼠标样式)
    属性值示意图描述auto 默认值,由浏览器根据当前上下文确定要显示的光标样式default默认光标,不考虑上下文,通常是一个箭头none 不显示光标initial 将此属性设置为其默认值inherit 从父元素基础cursor属性的值context-menu表示上下文菜单可用......
  • CSS布局概念与技术教程
    以下是一份CSS布局学习大纲,它涵盖了基本到高级的CSS布局概念和技术引言欢迎来到CSS教程!如果你已经掌握了HTML的基础知识,那么你即将进入一个全新的世界,通过学习CSS(CascadingStyleSheets,层叠样式表),你将能够赋予网页丰富的视觉效果和布局。CSS是前端开发中不可或缺的一部分,它可......
  • 网页布局------阴影效果显示
    在制作网页的过程中,经常需要对图片添加阴影效果基本语法如下box-shadow:h-shadowv-shadowblurspreadcoloroutset;具体参数属性如下参数值描述h-shadow表示水平阴影的位置们,可以为负值(必选属性)v-shadow表示垂直阴影的位置,可以为负值(必选属性)blur阴......
  • WEB自动化测试-CSS定位
    CSS相对定位:1、可维护性更强2、语法更加简洁3、可以解决复杂定位场景调试方法:1、进行浏览器的console:2、输入:$(""),输入内有字符串和外层字符串相反,外单内双,外双内单CSS基础语法4方式1、id:$("#site-logo")格式:$("#+id")2、class:(".logo-big")格式:$("......
  • css-flex布局 space-between最后一行向左对齐
    首先我们实现的是如下图<template><divclass="father"><divclass="child"></div><divclass="child"></div><divclass="child"></div><divclass="child......
  • CSS在线格式化、美化、压缩工具
    网上有不少CSS格式化压缩的工具,但是不少站点有广告干扰,或操作起来不方便,或打开速度比较慢,所以自己定制了这个css格式化压缩的工具,也希望对大家有帮助,提供的这个CSS代码格式化和css在线压缩工具,不需要下载使用YUICompressor或CSSTidy等离线格式化工具,直接在线压缩操作即可。免......
  • CSS-Grid网格布局学习心得
    CSS-grid属性:value(可选值):<'grid-template'>|<'grid-template-rows'>/[auto-flow&&dense?]<'grid-auto-columns'>?|[auto-flow&&dense?]<'grid-auto-rows'>/<'g......
  • 网页根据屏幕宽度请求不同的CSS文件
    网页根据屏幕宽度请求不同的CSS文件前言:重在记录,可能出错。一、代码<!DOCTYPEhtml><htmllang="ch"> <head> <title>网页根据屏幕宽度请求不同的CSS文件</title> <linkid="desktop-style"media="onlyscreenand(min-width:960px)"type=&......
  • Selenium4自动化测试3--元素定位By.NAME,By.LINK_TEXT 和通过链接部分文本定位,By.PARTI
    4-通过名称定位,By.NAMEname属性为表单中客户端提交数据的标识,一个网页中name值可能不是唯一的。所以要根据实际情况进行判断 importtimefromseleniumimportwebdriverfromselenium.webdriver.common.byimportBy#指定浏览器的位置,解决浏览器驱动和浏览器版本不匹配......