float属性

最新推荐文章于 2024-11-22 21:43:59 发布

原创最新推荐文章于 2024-11-22 21:43:59 发布 · 8.9k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

css 专栏收录该内容

16 篇文章

订阅专栏

float属性用于定义元素的浮动方向，常用于图像布局，但适用于任何元素。浮动元素生成块级框并可能影响周围文本排列。当空间不足时，元素会换行以适应空间。该属性可取值为left、right或none，其中none为默认值，表示元素不浮动。

float属性

注：浮动元素产生了浮动流
所有产生浮动流的元素，块级元素看不到它们；
产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素。

<style>
    .wrapper{
        width:300px;
        height: 300px;
        border: 1px solid black;
    }
    .content{
        width:100px;
        height: 100px;
        background-color: black;
        color: #fff;
        float: left;
        opacity: 0.25;
    }
    .two{
        width:100px;
        height: 100px;
        background-color: yellow;
        clear: both;
    }
</style>
<body>
<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="two">123</div>
</div>
</body>

在这里插入图片描述
现象：123在div下方，因为文本能看到浮动元素！！！！

一.定义和用法
1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。

<style>
    img{
        float: left;
        margin-right: 10px;
    }
</style>
<body>
<img src="../image/pig.jpg">
随着互联网的迅猛发展和普及，一个新型的行业和新兴的职位正在上升到技术的层面：web前端开发工程师，Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性
web前端开发工程师-web2.0时代
web前端开发工程师-web2.0时代
Web前端表现层及与前后端交互的架构设计和开发
配合后台开发人员实现产品界面和功能
利用各种Web技术模拟开发产品原型
Web新技术调研和资讯整理
精通HTML/XHTML、CSS，熟悉页面架构和布局，对Web标准和标签语义化有深入理解
熟悉Ajax、JavaScript(或者ActionScript)、DOM等前端技术，掌握面向对象编程思想
随着互联网的迅猛发展和普及，一个新型的行业和新兴的职位正在上升到技术的层面：web前端开发工程师
Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性
web前端开发工程师-web2.0时代
web前端开发工程师-web2.0时代
Web前端表现层及与前后端交互的架构设计和开发
配合后台开发人员实现产品界面和功能
利用各种Web技术模拟开发产品原型
Web新技术调研和资讯整理
精通HTML/XHTML、CSS，熟悉页面架构和布局，对Web标准和标签语义化有深入理解
熟悉Ajax、JavaScript(或者ActionScript)、DOM等前端技术，掌握面向对象编程思想
随着互联网的迅猛发展和普及，一个新型的行业和新兴的职位正在上升到技术的层面：web前端开发工程师
Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性
web前端开发工程师-web2.0时代
web前端开发工程师-web2.0时代
Web前端表现层及与前后端交互的架构设计和开发
配合后台开发人员实现产品界面和功能
利用各种Web技术模拟开发产品原型
Web新技术调研和资讯整理
精通HTML/XHTML、CSS，熟悉页面架构和布局，对Web标准和标签语义化有深入理解
熟悉Ajax、JavaScript(或者ActionScript)、DOM等前端技术，掌握面向对象编程思想
</body>

在这里插入图片描述
2.浮动元素会生成一个块级框(inline-block)，而不论它本身是何种元素。
3.如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
4.假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

<style>
    .wrapper{
        width:320px;
        height: 300px;
        border: 1px solid black;
    }
    .content{
        width:100px;
        height: 100px;
        background-color: black;
        color: #fff;
        float: left;
        opacity: 0.25;
    }
</style>
<body>
<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>
</body>

在这里插入图片描述