美文网首页
HTML标签4(浮动)

HTML标签4(浮动)

作者: Dxes | 来源:发表于2019-12-06 20:55 被阅读0次
通过设置标签的float属性,可以让标签浮动
left:左浮动,浮动后标签靠左显示
right:右浮动,浮动后标签靠右显示

2.什么时候使用浮动
浮动可以让竖着显示的横着显示;还可以让标签靠右显示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>==========1.浮动会导致脱流==========</h1>
        <div id="" style="height: 250px;">
            
            <p style="background-color: chartreuse; height: 40px; float: left;">我是段落1</p>
            <p style="background-color: red; float: left;">我是段落1</p>
            
            <a style="background-color: yellow; height: 40px; float: left;">这是链接1</a>
        </div>

        <h1>==========2.浮动会导致脱流==========</h1>
        <div id="" >
            <p style="background-color: rosybrown; float: left;">我是段落1</p>
            <p style="background-color: red;float: right;">我是段落2</p>
            <p style="background-color: yellow; float: left;">我是段落3</p>
            <p style="background-color: #0000FF; float: right;">我是段落4</p>
            <p style="background-color: palevioletred; float: left;">我是段落5</p>
            
            
        </div>
        
        
        
    </body>
</html>

相关文章

  • HTML标签4(浮动)

  • 前端面试常见问题-持续更新

    一、html&css 1.html5新增的标签属性 2.css3新增的属性 3.position定位 4.浮动 5...

  • 前端组件总结

    1.Input标签 HTML标签 2.Button按钮 HTML标签 3.Select下拉组件 HTML标签 4....

  • HTML标签4

    注:本文内容为本人学习慕课网前端知识时整理摘录,方便后续查阅。具体可访问原链接 1. 标签----和浏览器交互  ...

  • 【区别】<object>标签和 <embed&

    历史: 标签是 HTML 4 的标准标签(在HTML 5中依然保留,但是删除了部分属性) 标签是 HTML 5 的...

  • Python HTML和CSS 1:html文档结构和常用标签

    总体内容1、前端概述2、html 文档结构3、html 标题标签、段落标签、换行标签 与 字符实体4、html 块...

  • H5变化的元素

    DOCTYPE meta声明 link标签 script标签 DOCTYPE声明 html4 html5 meta...

  • css高级

    HTML4 常用标签 HTML5 常用标签 语义化的好处 如何写出更优的 html 标签嵌套 内联元素:不能包含块...

  • CSS层叠样式表--选择器

    CSS的作用:用来设置网页结构样式。通过css给html标签设置属性来达到改变标签样式。 选择器、盒子模型、浮动、...

  • doy01

    A今天学到了什么 1、html和css是什么 2、了解html标签 3、常用的html标签 4、常用的css样式 ...

网友评论

      本文标题:HTML标签4(浮动)

      本文链接:https://www.haomeiwen.com/subject/vjxygctx.html