浮动元素经常和标准流父级搭配使用（HTML、CSS）

一时失言乱红尘 2023-10-03 13:04 14阅读 0赞

### 浮动元素经常和标准流父级搭配使用（HTML、CSS） ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>浮动元素经常和标准流父级搭配使用</title>
        <style>
            .box {
        
                width: 1200px;
                height: 460px;
                background-color: skyblue;
                margin: 0 auto;
            }
    
            .left {
        
                float: left;
                width: 230px;
                height: 460px;
                background-color: purple;
            }
    
            .right {
        
                float: right;
                width: 970px;
                height: 460px;
                background-color: rgb(255, 174, 0);
            }
        </style>
    
    </head>
    
    <body>
        <div class="box">
    
            <div class="left"></div>
            <div class="right"></div>
    
        </div>
    
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 css：标准流、浮动、定位

目录一、标准流：二、浮动：float 1、浮动布局注意点 2、消除浮动 3、清除浮动，防止父级边框塌陷的五种方法三、定位 1、定位模式： 2、static

朱雀/ 2024年04月06日 13:20/ 0 赞/ 93 阅读

相关浮动元素经常和标准流父级搭配使用（HTML、CSS）

浮动元素经常和标准流父级搭配使用（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

一时失言乱红尘/ 2023年10月03日 13:04/ 0 赞/ 15 阅读

相关 float浮动的元素过多，父级元素高度不自适应

float浮动的元素过多，父级元素高度不自适应问题解决方法：父级去掉height限制，添加overflow或者clear属性，比如：[http://www.yay

梦里梦外;/ 2023年07月17日 07:00/ 0 赞/ 32 阅读

相关 CSS-什么是标准文档流，元素的浮动，浮动元素的特点

在以前浮动多来控制图片，实现文字环绕图片的效果（字围效果）；现在主要利用浮动的特性（脱离标准文档流）来实现页面的布局标准文档流元素在排版布局过程中会默认自动从

Bertha 。/ 2023年06月02日 09:30/ 0 赞/ 44 阅读

相关 float元素产生浮动流清除浮动

浮动元素产生了浮动流所有产生了浮动流的元素，块级元素看不到他们，产生了BFC的元素和文本类属性的（inline）的元素以及文本都能看得到浮动元素，这样就导致一个问题，一

冷不防/ 2022年11月27日 15:53/ 0 赞/ 241 阅读

相关解决子元素设置浮动影响父元素问题

例： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/>

灰太狼/ 2022年06月09日 12:10/ 0 赞/ 483 阅读

相关 PHP递归找父级元素和子级元素

/ 寻找所有父级元素 @param $id @param $ancestor @return array /

迈不过友情╰/ 2022年04月24日 02:18/ 0 赞/ 563 阅读

相关 float浮动后，父级元素高度塌陷和遮盖问题

当子元素不浮动的时候，父元素的高度是由子元素撑起来的。子元素A和B是两个div，独占一行效果如图： ![1609148-2019062

港控/mmm°/ 2021年11月29日 12:24/ 0 赞/ 301 阅读

相关标准文档流与浮动

标准文档流 HTML制作网页的时候,要遵循从左到右,从上到下的顺序空白折叠现象存在于文字与图片之间解决方法: 将这些元素放在一排,紧密相连高低不齐

超、凢脫俗/ 2021年10月19日 06:34/ 0 赞/ 327 阅读

相关父元素清除浮动

[清除浮动float (:after方法)][float _after] 1. 什么时候需要清除浮动？清除浮动有哪些方法？（1）对元素进行了浮动（float）后，该元

Myth丶恋晨/ 2021年10月09日 03:26/ 0 赞/ 474 阅读