Float - elementy obok siebie

Question

Witam, myślałem że rozumiem float, jednakże analizuje pewien  przypadek, gdzie zestawiam ze sobą elementy obok, nie stosowałem clearfixa, tylko nadałem już wysokość rodzica na sztywno. Moje pytanie, dlaczego drugi element(Pianino) nie wypełnia całej szerokości nagłowka, tylko muszę użyć na niego również float:left jak na poprzednim elemencie. Link z kodem poniżej:

https://jsfiddle.net/7umh4fbj/

Answer 1

Może dlatego, że : 
 

Właściwość float określa, czy element powinien unosić się w lewo, w prawo, czy wcale.  Elementy pozycjonowane bezwzględnie ignorują właściwość float.

 https://forum.pasja-informatyki.pl/571011/float-elementy-obok-siebie
Poczytaj tutaj dokładniej, w efekcie element o którym mówisz,  jeśli nie ma właściwości float zostaje przykryty wyżej wymienionym 


zobacz to dodając do swojego elementu "pierwszego" display:none, w tej sytuacji element Piano znajduje się całkowicie pod nim. 

  nav.desktop {
        float: left;
        width: 300px;
        background-color: rgb(136, 130, 130);
        display:none;
      }

więc jest przez niego przykryty, kiedy dodajesz temu blokowi również float left, pojawia się on obok, a nie jest "OPŁYNIĘTY" przez blok desktop. 

Dodaj do elementu Piano właściwość np. display: inline-block
 

  header {
       display: inline-block; // dodanie tego bez float.
        width: calc(100% - 300px);
        background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Piano_Keyboard.jpg/800px-Piano_Keyboard.jpg?20131026055017);
        background-size: cover;
      }

załatwi sprawę. Albo nie dodawaj właściwości display-block, a wykorzystaj właściwość FLEX i dodaj do rodzica 

header {
        height: 360px;
          display:flex; // wykorzystaj flex system
      }

i również bez float zadziała. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

BTW, do komentowania w kodzie css używamy

/*  komentarz  */

 

<p>Lorem ipsum - /* */</p>
<p>Lorem ipsum - //</p>

p:nth-child(1) {
  color: red; /* lorem ipsum */
  font-size: 200%;
}
p:nth-child(2) {
  color: blue; // lorem ipsum
  font-size: 200%;
}

 

Answer 2

Jeżeli chcesz tylko zrozumieć działanie własności float, to masz dobry przykład. Ale do budowania layoutu strony użyj współczesnych technologii - są naprawdę łatwe w stosowaniu i pozbawione wad własności float.

Nadanie elementowi własności float powoduje jego wyjęcie z normalnego układu strony (flow strony) i wstawienie w określone miejsce. Tak zrobiłeś z elementem nav - kazałeś mu ustawić po lewej stronie pozostałych elementów. Problem w tym, że aby elementy blokowe zastosowały się do tej własności, wszystkie one muszą mieć nadany float, inaczej zajmą takie położenie, jakby elementu nav w ogóle nie było na stronie - co widziałeś na przykładzie.

Comments

Dziękuje Wam za wytłumaczenie, zrozumiałem. Rzeczywiście warstwa pianina była przykryta przez nava , dlatego ucieło kawałek elementu.