浮动知识总结

最新推荐文章于 2024-07-12 16:31:27 发布

诗风乐雨

最新推荐文章于 2024-07-12 16:31:27 发布

阅读量108

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_45119312/article/details/124268836

版权

1.块的居中

 .box{
             height: 100px;
             width: 100px;
             background-color: red;
             margin: 0 auto;
 
         }
 span{
      /* 定宽居中对行元素无效 */
     width: 1000px;
     margin: 0 auto;
 }

2.行内块和行元素

 <!DOCTYPE html>
 <html lang="en">
 <head> 
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible"content="IE=egde">
     <meta name="viewport"content="width=device-width,initial-scale=1.0">
     <style>
         img{
             /* 当图片只设置宽度或高度 另一个会自适应 */
             width: 100px;
         }
         body{
             /* 需要在其父元素中设置 text-align: center; 和设置文字一样 */
             text-align: center;
         }
     </style>
 </head>
 <title >命名规则</title>
 <body>
 <div class="box">
       <span>hello</span><img src="https://i0.hdslb.com/bfs/article/dce2f7f7861a8e15346239fdb4714b6d1f215574.jpg@942w_1623h_progressive.webp" alt="">
       
 </div>
 
 </body>
 </html>

3.浮动布局

 <!DOCTYPE html>
 <html lang="en">
 <head> 
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible"content="IE=egde">
     <meta name="viewport"content="width=device-width,initial-scale=1.0">
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         .box{
             width: 100px;
             height: 100px;
             border: 1px solid black;
             display: inline-block;
             /* float: left; */
             /* float: right; */
         }
         .red{
             background-color: red;
             
         }
         .green{
             background-color: green;
         }
         .blue{
             background-color: blue;
         }
     </style>
 </head>
 <title >命名规则</title>
 <body>
     <!-- 表格布局  行内块布局
     浮动布局：  1. 为何要使用浮动布局
                   让多个块元素在同一行显示
                 2. 浮动分为左浮动和右浮动
     -->
 <div class="box red"></div>
 <div class="box green"></div>
 <div class="box blue"></div>
 
 </body>
 </html>

4.浮动对自身的影响

开启浮动后:

1 会立即脱离文档流（在文档流中没有该元素的位置

2 层级默认会提升，会覆盖其他元素

3 浮动不会覆盖文字

4 行元素和行内块会变成块元素默认宽高有内容撑开

5 浮动不会继承

5.浮动对象地元素的影响

兄弟元素之间的影响

1. 开启浮动后后面的块元素b会默认上移如果想保持在原位置可以清除浮动对b影响

2. A元素是块元素没开启浮动下面的B元素开启浮动后上不去

6.浮动对父元素的影响

对父元素的影响：

由于子元素开启了浮动脱离文档流所以无法撑起父元素的高度引起了高度塌陷

解决：

1. 设置高度（不推荐）

2. 添加一个空元素然后消除浮动

3. 给父元素设置 overflow：hidden

4. 父元素也设置浮动

7.最终解决方案

 <!DOCTYPE html>
 <html lang="en">
 <head> 
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible"content="IE=egde">
     <meta name="viewport"content="width=device-width,initial-scale=1.0">
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         .parent{
             border: 10px solid #000;
             /* overflow: hidden; */
             /* float: left; */
         }
         .box{
             height: 100px;
             width: 100px;
             background-color: red;
             
 
         }
         .red{
             background-color: red;
             float: left;
         }
         .green{
             background-color: green;
             float: left;
         }
         .blue{
             background-color: blue;
             float: left;
         }
         .clear-float{
             clear: both;
         }
         .parent::after{
             /* 伪元素 必须要有 content 才会显示 */
             content: "";
             /* 默认 伪元素是 inline 需要改造成block */
             display: block;
             clear: both;
         }
     </style>
 </head>
 <title >命名规则</title>
 <body>
     <!--
          使用伪元素 解决 高度塌陷
          伪元素：元素的特殊位置   
     -->
     <div class="parent clearfix">
         <div class="box red"></div>
         <div class="box green"></div>
         <div class="box blue"></div>
         <!-- <div class="clear-float"></div> -->
     </div>
 </body>
 </html>

诗风乐雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动知识总结

1.块的居中.box{ height: 100px; width: 100px; background-color: red; margin: 0 auto; }span{ /* 定宽居中对行元素无效 */ width: 1000px; margin: 0 auto;}2.行内块和行元素<!DOCTYPE html&...
复制链接

扫一扫