前端基础笔记-CSS-04-浮动

程序员文章站 2022-03-05 22:06:13

...

浮动

CSS布局的三种机制
浮动

浮动的扩展

清除浮动

CSS布局的三种机制

1.普通流（标准流）

块级元素独占一行，从上到下顺序排列。常见的块级元素有div、hr表格行、ul无序列表、ol有序列表、p段落、form表单、table表格、h1-h6等。
行内元素在一行内从左到右顺序显示，到父元素边缘就自动换行。常见的有a链接、em强调、span等。

2.浮动
让盒子从普通流中浮起来，主要作用是让多个块级盒子在一行内显示。

3.定位
将某个盒子定位在浏览器的某一固定位置。

浮动

概念：给元素设置了浮动之后，元素会脱离普通流，移动到指定位置。
作用：让多个块级元素在一行内显示；实现盒子左右对齐；实现文字环绕图片的效果等。

float的语法：选择器 { float: 属性值; }
前端基础笔记-CSS-04-浮动

设置了浮动的元素是漂浮在普通流元素上面的
浮动元素不占有原来的位置，原先的位置会空出来，顺位的标准元素会向上填补这个空位
给元素设置浮动，会改变display属性，类似于转换成为行内块，但是行内块之间会有空白缝隙，浮动元素之间是紧贴着的。如果到达父级元素的边界，就会自动排列到下一行对齐。

例1：两个普通流块级元素各占一行从上到下顺序排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: rgba(255, 0, 0, 0.5);
            
        }
        .box2 {
            width: 150px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    
</body>
</html>

前端基础笔记-CSS-04-浮动
当给一个元素设置浮动之后，它就会“飘起来”

        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgba(255, 0, 0, 0.5);
            
        }

前端基础笔记-CSS-04-浮动
例2：将三个块级元素设置display属性转换为行内块，会有空白缝隙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .box3 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

前端基础笔记-CSS-04-浮动

转换为浮动元素后，紧密贴合，无空白缝隙。

    <style>
        .box1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
            
        }
        .box2 {         
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
            
        }
        .box3 {      
            float: left;
            width: 100px;
            height: 100px;
            background-color: green;
            
        }
    </style>

前端基础笔记-CSS-04-浮动
注意：由于浮动元素会使它之后的标准流元素到原先浮动元素的位置进行补位，为了避免浮动元素对其他标准流元素的影响，通常给浮动元素添加一个标准流的父元素。

练习：利用浮动做一个丑陋的导航栏
注意：在实际的导航栏中，往往会用li包裹a，这样一是为了使语义更清晰，二是防止网站有堆砌关键字的嫌疑导致网站权重降低。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*清除元素的默认内外边距*/
        * {
            margin: 0px;
            padding: 0px;
        }
        /*清除列表的默认样式*/
        li {
            list-style: none;
        }
        div {
            width: 300px;
            height: 30px;
            background-color: grey;
            margin: auto;/*使盒子在浏览器中水平居中*/
        }
        /*因为li是块级元素，所以要对li设置浮动，使一行内显示*/
        div li {
            float: left;
        }
        /*a是行内元素，是没有大小的，靠内容撑开大小，所以要设置大小就要转换*/
        div li a {
            display: block;
            line-height: 30px;
            text-decoration: none;
            font-size: 18px;
            color: orange;
            background-color: #cccccc;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </div>
</body>
</html>

前端基础笔记-CSS-04-浮动

浮动的扩展

1.浮动元素不会超过父元素的内边距以及边框，子元素的浮动是参照父元素对齐的。
2.浮动元素只会影响当前的或是后面的标准流元素，不会影响前面的。
前端基础笔记-CSS-04-浮动
如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题。

清除浮动

父盒子没有设置高度的时候，如果子盒子全是浮动的，那么因为浮动盒子不会实际占有标准流的位置，会造成父盒子没有高度，这样就会影响下面的标准流盒子的位置。
如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .father {
            border: 5px solid red;
        }
        .son1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .son2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
        .next {
            width: 300px;
            height: 300px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="next"></div>
</body>
</html>

前端基础笔记-CSS-04-浮动
所以要清除浮动，即清除浮动带来的影响。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

语法选择器{clear:属性值;}
前端基础笔记-CSS-04-浮动
清除浮动的方法：
1.额外标签法
在浮动元素的末尾添加一个空标签，如：

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div style="clear: both;"></div>
    </div>
    <div class="next"></div>
</body>

2.为父元素添加overflow属性

overflow: hidden || scroll || auto; 后两种不怎么会用到

        .father {
            border: 5px solid red;
            overflow: hidden;

这种方法的缺点是如果内容多于父盒子原本设置的大小，溢出的部分就会被隐藏。

3.使用after伪元素
这种方法其实就相当于方法1，即在浮动元素的末尾添加空标签，是方法1的升级版，相较而言，这个方法好在不用改变html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .clearfix:after {  
            content: ""; 
            display: block; 
            height: 0; 
            clear: both; 
            visibility: hidden;  
        }   
        .clearfix {   /* IE6、7 专有 */
            *zoom: 1;
        }   
        .father {
            border: 5px solid red;
            /*overflow: hidden;*/
        }
        .son1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .son2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
        .next {
            width: 300px;
            height: 300px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
        <!--<div style="clear: both;"></div>-->
    </div>
    <div class="next"></div>
</body>
</html>

4.使用双伪元素清除浮动
其实就是在浮动元素前后都增加空标签。

.clearfix:before,
.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

用上述四种方法清除浮动后，可以看到
前端基础笔记-CSS-04-浮动

相关标签：前端基础笔记--html&&css css

上一篇： 10.前端基础--CSS盒子浮动

下一篇： VB.Net版机房收费系统 -数据库设计

前端基础笔记-CSS-04-浮动

浮动

CSS布局的三种机制

浮动

浮动的扩展

清除浮动

小范笔记：ASP.NET Core API 基础知识与Axios前端提交数据

web前端基础之HTML5语义化新标签学习笔记（8）学会用语义化标签

前端JS基础知识复习笔记（18）---AXIOS

前端笔记知识点整合之服务器&Ajax（中）MySQL基础操作&PHP操作数据库&Ajax

重温前端基础之-css浮动与清除浮动

Web前端基础CSS初识学习笔记（5）简单实例认识 border-radius

前端基础笔记（一）

前端笔记记录---简单导航栏（浮动）

【前端】CSS3学习笔记（四）——浮动

前端开发基础学习笔记（三）：知识点--CSS基础