CSS Float および関連するレイアウトモード-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS Float および関連するレイアウトモード

高洛峰

Nov 01, 2016 pm 03:40 PM

css

浮動小数点値

CSS Float および関連するレイアウトモード

栗を見てください

赤いワイヤーフレームは親要素を表します

CSS Float および関連するレイアウトモード

実際には、完全に邪魔にならないわけではなく、ブロックされます。親要素の境界によって。

float 要素は同じドキュメントフロー内にあります

例を見てください:

赤い線のボックスは親要素を表します

CSS Float および関連するレイアウトモード

3 つの子要素が「左にフロート」した後、親要素はコンテンツがないため、親要素は High になりません。

float 要素はドキュメントフローから半分離されています

要素の場合、コンテンツの場合はドキュメントフローから分離され、ドキュメントフロー内にあります。要素は重複しますが、コンテンツは重複しません。

CSS Float および関連するレイアウトモード

例をあげてください:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float元素半脱离文档流</title>
    <style type="text/css">
    body{
        width: 300px;padding: 5px;line-height: 1.6;
        border: 1px dashed blue;
    }
    .sample{
        height: 100px;margin-right: 5px;
        padding: 0 5px; line-height: 100px;background-color: pink;
    }
    .sb{
        outline: 1px dashed  red;

    }
    .sample{
        float: left;
    }
    </style>
</head>
<body>
<div class="sample">float : left </div>
<div class="sb">
A float is a box that is shifted to the left or right on the current line .
the most interesting characteristic of a float (o "floated" o "floating" box)
is that content may flow along its side (or be prohibited from doing so by the &#39;clear&#39;
property).
</div>
</body>
</html>

CSS Float および関連するレイアウトモード

別の例をあげてください:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float abscure</title>
    <style type="text/css">
    body{
        width: 400px;line-height: 1.6;
    }
    .sample{
        width: 100px;line-height: 100px;
        margin: 3px;text-align: center;
        background-color: pink;
    }
    .sb{
        margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;
    }
    .sample{
        float: left;
    }
    

    </style>
</head>
<body>
    <div class="sb">
            <div class="sample">float: left;</div>
        第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。
    </div>
    

    <div class="sb">
        有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。
    </div>
</body>
</html>

CSS Float および関連するレイアウトモード

通常、この結果は望ましくありませんが、ピンクの div は最初のテキストブロックで囲まれているだけです。 clear 属性を使用する必要があります

clear

clear を理解するには、まず div がページ内の排他的な行を占め、上から下に配置されることを知る必要があります。は伝説の流れです

CSS Float および関連するレイアウトモード

① 後続の要素に適用して、後続の要素へのフローティングの影響をクリアします。

②ブロックレベルの要素に適用する

使用法:

空白の要素を追加します (あまり使用されません)

clearfix、これは一般的な解決策です。実際、使用できないドットはフロートをクリアするために使用されます。

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float abscure</title>
    <style type="text/css">
    body{
        width: 400px;line-height: 1.6;
    }
    .sample{
        width: 100px;line-height: 100px;
        margin: 3px;text-align: center;
        background-color: pink;
    }
    .sb{
        margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;
    }
    .sample{
        float: left;
    }

    .clearfix:after{
        content: &#39;.&#39;;     /* 在clearfix后面加入一个 . */
        display: block; /* 设置 . 块级元素 */
        clear: both;  /* 清除浮动效果 */

        /*隐藏那个 .  */
        height: 0;       
        overflow: hidden;
        visibility: hidden;

    }

/*    .clearfix{
    zoom: 1; 由于在IE 低版本中，不支持after属性，所以需要增加zoom属性 
    } */

    </style>
</head>
<body>
    <div class="sb clearfix">
            <div class="sample">float: left;</div>
        第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。
    </div>
    

    <div class="sb">
        有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。
    </div>
</body>
</html>

CSS Float および関連するレイアウトモード

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

cohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか？Apr 23, 2025 am 09:57 AM

まあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、