✍ 📁 🙈 🙉 🙊 : CSS float 浮動

CSS Float 浮動

<div id="MMM" >
<div id="Mn1" onclick="MmDd(0)">float left</div>
<div id="Mn2" onclick="MmDd(1)">float right</div>
<div id="Mn3" onclick="MmDd(2)">float none </div>
<div id="Mn4" onclick="MmDd(3)">float left</div>
</div>
<div id="DDD">

<div id="DP1">
<img id="IMG" style="width:auto;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg?quality=82&strip=all&w=200"  />
Float浮動屬性:通常是想在版面上做出文繞圖的效果，但也可以應用在元素的左右對齊。
<br>
讓元素脫離normal flow，浮動到父容器的上內緣（top），並往右right或往左left貼齊父容器的左內緣或右內緣。

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:left 。

<<c>style>
#img { float: left ;padding: 7px;}
<<c>/style>

</pre>

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:right。

<<c>style>
#img { float: right;padding: 7px;}
<<c>/style>

</pre>

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:none。

<<c>style>
#img { float: none ;padding: 7px;}
<<c>/style>

</pre>

<pre>
<<c>div class="normal">
<<c>div class="float">
<<c>/div><<c>/div>
<<c>style>
.float{ background-color: red;
        width: 300px;
        height: 100px;
        float: left; }
.normal{ background-color: green;
         width: 400px;
         height: 120px; }
<<c>/style>

</pre>

</div>

</div>
</div>

#MMM { position: fixed;
       top:5px ;z-index:2  }

#DP1 ,#DP2 ,#DP3 ,#DP4 { height: 550px;
                         width: 96%;
                         border: 1px solid black;
                         margin-top:-0px;
                         background-color:linen ;
                         display:none ;
                         padding:3px;
                         font-size: 22px;
                         position: fixed;
                         top:35px ;
word-break: keep-all; word-wrap: break-word;}
//word-break: normal|break-all|keep-all;

</style>

function MmDd(xx){
MMM.children[0].style.backgroundColor = "silver"; 
MMM.children[0].style.opacity = 0.6 ;
MMM.children[1].style.backgroundColor = "silver"; 
MMM.children[1].style.opacity = 0.6 ;
MMM.children[2].style.backgroundColor = "silver"; 
MMM.children[2].style.opacity = 0.6 ;
MMM.children[3].style.backgroundColor = "silver"; 
MMM.children[3].style.opacity = 0.6 ;

DDD.children[0].style.display = "none" ; 
DDD.children[1].style.display = "none" ; 
DDD.children[2].style.display = "none" ; 
DDD.children[3].style.display = "none" ;

MMM.children[xx].style.backgroundColor = "linen"; 
MMM.children[xx].style.opacity = 1 ; 
DDD.children[xx].style.display = "block" ; 
}

DP1.style.display = "block";
Mn1.style.backgroundColor = "linen ";
Mn1.style.opacity = 1;
</script>

<div>
<img id="IMG" style="width:auto;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg?quality=82&strip=all&w=200" />
<pre>
Float參數值： none （元素的預設值）
             left （向左浮動） 
             right（向右浮動）
 
但也可以應用在元素的左右對齊，浮動到父容器的上內緣（top），
並往右right或往左left貼齊父容器的左內緣或右內緣。
</pre><br><br>

<div id="ch">
<div id="DP" >Css img{ float: left }</div>

<label class="container" >float: left
  <input type="radio" checked="checked" name="radio" 
          onclick="Ccc('left')" >
  <span class="checkmark"></span>
</label>
<label class="container" >float: right
  <input type="radio" name="radio" onclick="Ccc('right')" >
  <span class="checkmark"></span>
</label>
<label class="container" >float: none 
  <input type="radio" name="radio" onclick="Ccc('none' )" >
  <span class="checkmark"></span>
</label>
</div>

}
</script>

.container { position: relative;
             padding-left: 25px;
             cursor: pointer;
             font-size: 22px; }
.container input { opacity: 0;
                   cursor: pointer;}
.checkmark { position: absolute;
             top: 0;
             left: 0;
             height: 25px;
             width: 25px;
             background-color: #C0C0C0;
             border-radius: 50%;}
.container:hover input ~ .checkmark {
                background-color: #808080; }
.container input:checked ~ .checkmark {
                background-color: #2196F3; }
.checkmark:after { content: "";
                   position: absolute;
                   display: none }
.container input:checked ~ .checkmark:after {
    display: block; }

.container .checkmark:after { top: 9px;
                              left: 9px;
                              width: 8px;
                              height: 8px;
                              border-radius: 50%;
                              background: white;}

</style>

Edit

用JavaScript連結Google Sheets #html #網頁計設計 #script #style #float left #float right #float none

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

CSS：Float

CSS Float 浮動

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

CSS：Float

CSS Float 浮動

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單