学习
实践
活动
工具
TVP
写文章

HTMLCSS浮动布局的特点

浮动元素会脱离标准流(简称:脱标),在标准流不占位置。 ※ 相当于从地面飘到了空中,如果一个元素按照正常的标准流来显示,会在html中所属的位置上占位,后面的元素会紧跟着它,但是浮动脱离了标准流,以后我们在看到浮动的元素之后,不能以正常的标准流里进行判断。 浮动元素比标准流高半个级别,可以覆盖标准流的元素。 浮动浮动,下一个浮动元素会在上一个浮动元素后面左右浮动浮动元素会受到上面元素边界的影响。 浮动元素有特殊的显示效果: ※ 一行可以显示多个,不管元素是行内元素还是块级元素,设置浮动后,将来显示的时候会在同一行内显示,除非一行放不下了,才会在第二行依次显示。 ※ 可以设置宽高 注意点 浮动的元素不能通过 text-align:center 或者 margin:0 auto 让浮动元素本身水平居中。

6720

HTMLCSS清除浮动的方法总结

缺点: 有些布局不能固定父元素高度。如:新闻列表、京东推荐模块等。 2.额外标签法 操作: 在父元素内容的最后添加一个块级元素 给添加的块级元素设置clear:both 缺点: 会在页面添加额外的标签,会让页面的HTML结构变得复杂。 } .clearfix::after { clear: both; } 特点: 项目中使用,直接给标签加类即可,after用于清除浮动

5520
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML怎么做悬浮框?

    悬浮框是Web前端开发的一种常见的网页特效,它悬浮于网页内容之上,不受滚动条的影响,可以一直处于浏览器的可视区域内。 在CSS,position属性可以设置元素的定位方式。position属性有4个常用的可选值,分别表示的含义如下。 static:静态定位(默认定位方式)。 (1)创建一个HTML文件,在文件编写简单的网页结构和内容,具体代码如下。 <! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 此处用于编写悬浮框的样式 -- 此处用于编写网页结构 --> </body> </html> (2)在第11行代码的位置,新增如下代码,为网页填充内容,并完成悬浮框的页面结构。

    2.1K41

    页面浮动广告举例_html向下浮动代码

    今天做网页两侧浮动广告图片,用js代码是实现,下面是一个*.js文件,在需要用到的网页加一句代码 src=”*.js”>即可使用,我可弄好的,分享给有需要朋友。 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/192697.html原文链接:https://javaforall.cn

    9120

    html左侧浮动广告代码,如何制作浮动广告 JavaScript制作浮动广告代码

    如果有一定的JavaScript基础,制作浮动广告还是比较容易的。 document.documentElement.scrollTop+”/”+document.getElementById(“ad”).style.pixelTop; } window.οnscrοll=move; 要点: 上述代码要用 document.documentElement ,不要用老的document.body,否则,不符合w3c标准,看不到浮动效果! 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/191244.html原文链接:https://javaforall.cn

    11030

    HTML--猫眼电影---浮动练习

    HTML–猫眼电影—浮动练习 ---- 这次是一次回顾的练习。 代码照常都是含有详细解释。 ---- 效果图 ---- 首先是HTML代码 <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width -- 里面分为上<em>中</em>两个 大范围 --> <! <a href="#">10 下一页

    </body> </html 71,70,74) ; font-size: 14px; color: #999; line-height: 60px; text-align: center; } /* 设置 导航

    7120

    html+css学习笔记008-浮动0清除浮动

    DOCTYPE html> <html lang='en'> <head> <! -- 外链样式表 --> <style type='text/css'> /*内部样式表*/ float:left; /* 浮动:left左 right右 */ clear:left; /* 清除浮动 :left左 right右 both全部 */ /* 清除浮动方法: 1.增加空的块级标签

    2.给父级加个高度 需要给父级宽度> ul{ overflow:auto; } 5.after伪类清除 ul::after{ content:' '; display:block; clear:both; } 类名批量浮动与清除 可视化区域 -->
    </body> </html

    32620

    html左侧浮动广告代码,jQuery 浮动广告实现代码

    实现方法: 浮动广告 #qqonline{ background-color:red; border: 1px solid #fcc; position:absolute; top:100px; undefined’) { bodyTop = document.body.scrollTop; } $(“#qqonline”).css(“top”, 100 + bodyTop) // 设置层的CSS样式的 [height()],这里是与浏览器顶端保持1/4个页面的高度,如果diffH的值设置成0,浮动栏就会落在屏幕顶端 var percent=diffY+diffH; //percent将被赋值给css的 ,如果按照上面给的代码,这个高度将正好让浮动栏一直保持在屏幕中央 } }); / JS和HTML 的分割线 / 下面是HTML代码,只要把这部分放在HTML页面中就行了,动态页面php,jsp,asp等应该也没问题 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/191470.html原文链接:https://javaforall.cn

    9010

    HTML清除浮动的几种方法

    父元素浮动 给父元素设置浮动后,子元素的浮动会归位,不过如果还有父元素,还需要设置。不推荐使用。

    设置伪类方式 使用伪类的:after方式,给清除浮动,比较流行使用这个。 >

    HTML&CSS07_浮动和定位布局

    起初,我认真的时候,你不认真,现在你认真了,我却已离你有些远了。想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。现在大家工作了,也会遇到一些前端设计的...

    57180

    CSS浮动和清除浮动,梳理一下!

    第一篇就整理整理CSS很常见的浮动以及清除浮动的一些方式吧。 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。请默念3次! 直到inline-block出来后,浮动也有它自己独特的使用场景。 浮动有哪些特征? 浮动的特征就体现在前文的那句话,别忘了默念三次!此外,浮动带来的负效果也算是它的特征之一。 浮动可以内联排列 浮动会向左/向右浮动,直到碰到另一个浮动元素为止,这是浮动可以内联排列的特征。也就是说,浮动可以设置宽高,并且能够一行多个,是介于block和inline之间的存在。 ? { float: left; width: 100px; height: 100px; margin: 20px; background-color: green; }// html 还是接着上面的例子,我们简单修改一下HTML代码,如下

    html左侧浮动广告代码,网站侧边栏广告固定浮动效果的实现「建议收藏」

    之后,编辑侧栏模板,在侧栏最底部加入广告代码,代码如下: 广告的HTML代码 最后,在网站底部增加如下的javascript代码即可: $.fn.smartFloat = function() { 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/191625.html原文链接:https://javaforall.cn

    15240

    css-清除浮动方式四

    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width -- 1.清除<em>浮动</em>的第四种方式 利用伪元素选择器清除<em>浮动</em> 本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样 注意点: IE6<em>中</em>不支持这种方式, 为了兼容IE6必须给前面的盒子添加 </p> </div> <div class="box2">

    我是文字2

    我是文字2

    我是文字2

    </body> </html

    10310

    css清除浮动float 上

    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>65-清除浮动方式一</title> <style -- 1.清除浮动的第一种方式 给前面一个父元素设置高度 注意点: 在企业开发, 我们能不写高度就不写高度, 所以这种方式用得很少 -->

    css清除浮动方式五

    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width DOCTYPE <em>html</em>> <<em>html</em> lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width -- 1.overflow: hidden;作用 1.2清除<em>浮动</em> --> <div class="box1">

    我是文字1

    我是文字1

    我是文字

    我是文字2

    我是文字2

    我是文字2

    </body> </html DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

    14720

    HTML&CSS07_浮动和定位布局

    起初,我认真的时候,你不认真,现在你认真了,我却已离你有些远了。想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。现在大家工作了,也会遇到一些前端设计的...

    43590

    css清除浮动方式三

    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width -- 1.清除<em>浮动</em>的第三种方式 隔墙法 2.外墙法 2.1在两个盒子中间添加一个额外的块级元素 2.2给这个额外添加的块级元素设置clear: both;属性 注意点: 外墙法它可以让第二个盒子使用 wall h20">

    我是文字1

    我是文字1

    我是文字1

    </body> </html DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width 外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度 5.在企业开发<em>中</em>不常用隔墙法来清除<em>浮动</em> --> <div class="box1">

    我是文字1

    我是文字

    11910

    【说站】css浮动如何理解

    css浮动如何理解 本教程操作环境:windows7系统、CSS3、Dell G3电脑。 说明 1、浮动主要分为左浮动和右浮动,分别为float: left; float: right。 2、每次浮动后,元素本身都脱离文档流,原来的位置被其他元素占据。 如果目标元素在同一父元素占据浮动位置。 3、对于浮动元素有一个要求,必须有一个宽度。 DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动元素2</title> <! ,会考虑浮动元素的边界,因此会围绕着浮动元素 --> <style type="text/css"> html,body{ margin: 0; padding: 0; } #normal { width > 以上就是css浮动的理解,希望对大家有所帮助。

    9930

    html简单盒子图片文字分栏 两栏float左浮动

    本文源自 钻芒博客:https://www.zmki.cn/4909.html 于是乎便动手开始,结构如下图 效果如下 html(样式表都写了注释) <! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width width: 100%; /* 定义一个大盒子 宽度100% */ } .dahezi_img_left{ /* 第二个盒子, */ float: left; /* 要左<em>浮动</em> </div> </div> </body> </<em>html</em>>

    1.4K30

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券