Nie działający float

Question

Cześć, wie ktoś może dlaczego nie chce mi działać float:left na ostatnie zdjęcie, które chcę dodać? Poniżej linki do kodu. I sorrka za chaos w kodzie, dopiero się uczę i dla treningu postanowiłem zrobić sobie bardzo prostą stronę. I czy w miarę dobrze napisany kod?

html

klik

CSS

klik

 

 

 

Comments

Jeśli zaczynasz się uczyć to porzuć te floaty i od razu zainteresuj się flexem, nie trać czasu na rozkminianie czegoś, co dzisiaj nie jest już raczej stosowane, a przynajmniej nie do stylowania całego layoutu.

Flex jest bardzo przyjemny w pracy, a wszystkie najwazniejsze elementy możesz zobaczyć na stronce: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

Za niedługo zamierzam nauczyć się Flexa ale na razie chciałbym poznać float, bo też słyszałem, że się go stosuje i można go stosować ;)  i nie wiem, gdzie mam błąd :(

Answer 1

Tutaj przykładowy fiddle z tego kodu co podałeś:

https://jsfiddle.net/y4ufe3ja/2/

Co było nie tak?

Za dużo tych float'ów. Wystarczy dla rodzica (w tym przypadku div) ustawić float wtedy dla img już nie potrzeba.

Chyba że chodziło o inny efekt. Jeśli obrazki też by miały być do lewej to trzeba by dodać wewnątrz div-a z obrazkiem po obrazku diva z clear'em.

Comments

Tak, działa teraz :D a te wszystkie floaty co tam mam to są potrzebne?

---

wiesz może dlaczego moje sekcje mają 0 wysokości, nawet ja ustawie im wysokość to tyle mają

---

@świeży, Tak akurat te wszystkie floaty są potrzebne każdy element który ma iść do lewej/prawej musi mieć swój float ustawiony, oczywiście można zrobić to jednym wpisem w CSS:

section div {
  float:left;
}

zamiast

section div.first {
  float:left;
}
section div.second {
  float:left;
}

albo dodać klasę do CSS i ustawiać dla tych elementów co mają mieć float 

.float-left {
  float:left;
}

A jeśli chodzi o height = 0 to wynika, że tego że elementy z ustawionym float nie mają wpływu na wysokość rodzica (w tym przypadku section) 

Jeśli chcesz mieć niezerową wysokość section to 
można sprobować ustawić dla section w css takie coś

section {
  overflow: auto;
}

---

tak zrobiłem, miałem height:0 bo ustawiałem wysokośc dla secton div a nie dla samego section

section{

min-height:50vh

}

a z tym overflow to wysokość będzie sama się dostosoowywała do ilości elementów w tej sekcji?

---

i czy to jest poprawne, że min-height:50vh?

---

Z tego co widzę to tak, wysokość dostosowuje się do zawartości:

https://jsfiddle.net/y4ufe3ja/4/

Dodałam margin top i się zwiększyła wysokość section:

section div.first {
  width: 50%;
  min-height: 50vh;
  float: left;
  margin-top:30px;
}

Odnośnie vh to jednostka jak jednostka,
można stosować co kto lubi. Ja akurat nigdy nie stosowałam tej jednostki.

---

vh to z tego co wiem to powoduje, że strona jest tak jakby responsywna, choć do responsywności to jeszcze daleko

A wiesz może jak mogę zwiększyć podkreślenie pod elementami w menu po najechaniu, bo border-bottom jak zwiększe to strona się rozjeżdza