平武建站

什么是浮动？浮动带来的影响？怎么清除浮动？

浮动介绍

浮动（float）最初是为了让文字环绕图片排布，就想报纸上面的图文混排模式。但Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。

成都创新互联咨询电话：18980820575，为您提供成都网站建设网页设计及定制高端网站建设服务，成都创新互联网页制作领域十多年，包括社区文化墙等多个行业拥有多年的网站推广经验，选择成都创新互联，为企业保驾护航！

float属性

在css中可以通过float属性实现元素浮动，float属性定义元素在哪个方向浮动，它有两个值float:left和float:right，默认值为none

  • 设置这两个值元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
  • 浮动使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻浮动元素会停下来（padding也算）
  • 浮动元素之后的元素将围绕它，之前的元素将不会受到影响

特点

  • 不区分行、块、行内块元素，使用浮动直接让元素变为块级

  • 支持宽高、margin、padding，但不支持margin：auto

  • 不会有空隙问题(块级不存在基线对齐)

DEMO

DOCTYPE html>
<html>
    <head>
        <metacharset="utf-8">
        <title>title>
        <styletype="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .container{
                width: 300px;
                height: 300px;
                background-color: #23A6D5;
            }
            img{
                width: 100px;
                /* 设置图片左浮动*/
                float: left;
            }
        style>
    head>
    <body>
        <divclass="container">
            <imgsrc="./image/start.jpg">
            <p>文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素p>
        div>
    body>
html>

文章名称：什么是浮动？浮动带来的影响？怎么清除浮动？
浏览路径：http://pwwzsj.com/article/dsojejp.html

其他资讯