BFC/clear/::after擬似要素は高度崩壊を解決し、::beforeは外距離オーバーラップを解決する(clearfixは高度陥没と外距離オーバーラップを同時に解決する)(css)

24026 ワード

先端

BFC/clear/::after擬似要素は高度崩壊を解決し、::beforeは外距離オーバーラップを解決する(clearfixは高度陥没と外距離オーバーラップを同時に解決する)(css)

高度に集約された問題:

フローティングレイアウトでは、親要素の高さはデフォルトで布団要素によって支えられています.

サブエレメントがフローティングすると、ドキュメントフローから完全に離れ、親エレメントの高さを支えることができなくなり、親エレメントの高さが

失われます.
BFC(Block Formatting Context)ブロックレベルフォーマット環境

BFCはCSSの中の1つの隠れた属性で、1つの要素のために開くことができて、BFCを開いた後にこの要素は1つの独立したレイアウト領域

になります.

元素がBFCを開いた後の特徴:1.BFCをオンにする要素はフローティング要素で上書きされない.BFCをオンにする要素のサブ要素と親要素の外側の距離は重複しない.BFCをオンにする要素は、フローティングサブ要素を含むことができる.

は、いくつかの特殊な方法で要素のBFCをオンにする.

要素のフローティングを設定する(推奨しない)

要素を行内ブロック要素(推奨しない)

に設定する.

要素のoverfiowを非visibleの値に設定

一般的な方法:要素にoverflow: hiddenを設けるBFCを開き、フローティング要素

を含むことができるようにする.

clear(他の要素のフローティングの影響で要素の位置を変更したくない場合は、clearプロパティを使用して、フローティング要素が現在の要素に与える影響を明らかにできます)

の役割:フローティング要素が現在の要素に与える影響を明らかにする

clear: xxx; left
左側のフローティング要素が現在の要素に与える影響をクリアright
右側のフローティング要素が現在の要素に与える影響をクリアboth
両側で最大の影響を及ぼす側をクリア

の原理:フローティングをクリアすると、ブラウザは自動的に要素に上外距離を追加し、その位置が他の要素の影響を受けないようにする.

::after擬似元素高度崩壊を解決



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>after         title>
head>
    <style>
    
        .box1{
            border: 10px red solid;
        }
        
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bbffaa;
            float: left;
        }
        
        .box1::after{       /*     box1 box2                 */
            content: '';
            display: block;
            clear: both;
        }
        
    style>
<body>
    <div class="box1">
        <div class="box2">div>
        
    div>
body>
html>

::before外距離オーバーラップ問題の解決



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>::before       title>
head>
    <style>
    
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        
        .box1::before{
            content: '';
            display: table;
        }
        
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }
        
    style>
<body>
    <div class="box1">
        <div class="box2">div>
    div>
body>
html>

clearfixは高度崩壊と外距離の重なりの問題を同時に解決する

/* clearfix       */

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clearfix        title>
head>
    <style>
    
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }
        
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
        
    style>
<body>
    <div class="box1 clearfix">
        <div class="box2">div>
    div>
body>
html>

/*clearfix       */

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clearfix      title>
head>
    <style>
    
        .box1{
            border: 10px red solid;
        }
        
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
        
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
        
    style>
<body>
    <div class="box1 clearfix">
        <div class="box2">div>
    div>
body>
html>

(エッセンス)2020年6月26日C#クラスライブラリIpアドレスヘルプクラス

ASP.NET検証コントロールCustomValidatorクライアント検証DropDownList、TextBox